Ich möchte den Job vom Unerfahrenen zum Ingenieur wechseln. Ich habe mich entschlossen, die SPA-Entwicklung mit Rails API und vue.js zu studieren, um ein gutes Portfolio zu erstellen.
Der aktuelle Wissensstand ist die einfache Anwendungsentwicklung mit Ruby on Rails, die Versionsverwaltung mit git und die Bereitstellung mit heroku. Ich hoffe, es wird denjenigen helfen, die daran denken, vue.js in ihrem eigenen Memorandum und auf derselben Ebene auszuprobieren.
Verstehe die Grundlagen von Vue und die grundlegende Grammatik von Vue
【Referenz】 Dieser Artikel stammt aus dem Kurs von udemy "Super Vue.js 2 Complete Pack - Keine weiteren Materialien mehr kaufen! (Einschließlich Vue Router und Vuex) “ist die Ausgabe dessen, was Sie gelernt haben. Daher basiert der Code usw. auf dem Inhalt des Kurses.
【Verwandter Artikel】 [SPA-Entwicklung mit Rails x Vue] Lernen Sie die Grundlagen von Vue.js (Übersicht über die Syntax von vue.js / template) [SPA-Entwicklung mit Rails x Vue] Lernen Sie die Grundlagen von Vue.js (Vue-Instanzkomponente VueCLI) [SPA-Entwicklung mit Rails x Vue] Lernen Sie die Grundlagen von Vue.js (benutzerdefinierte Direktivenübergänge usw.) [SPA-Entwicklung mit Rails x Vue] Weitere Informationen zu Vue Router / Vuex
Lass uns schnell gehen!
Javascript ist in den meisten Webanwendungen implementiert und einfach zu schreiben Heutzutage ziehen die drei Hauptgerüste Vue, React und Angular Aufmerksamkeit auf sich. Wenn Sie sich die Trends ansehen, können Sie sehen, dass jQuery rückläufig ist, aber die drei wichtigsten Frameworks auf dem Vormarsch sind.
【Referenz】 Sehen Sie aus dem Trend, welche von Vue.js vs React vs Angular zu wählen ist Was ist jQuery? Warum sollte ich es nicht benutzen (oder sollte ich es nicht benutzen)?
Dieses Mal möchte ich vue auswählen, das geringe Lernkosten hat und auch in kleinen Entwicklungen leicht eingeführt werden kann.
Zusammen mit "Reagieren" wird vue.js von vielen Unternehmen in Japan übernommen. Es gibt vier Hauptgründe, warum vue.js von vielen Unternehmen übernommen wird.
In Rails 6.0 können Sie beispielsweise vue.js verwenden, indem Sie webpacker für vue.js installieren und nur eine Zeile schreiben. Mit anderen Worten, es ist möglich, vue.js teilweise für Rails-Apps zu verwenden, und vue.js kann hauptsächlich für die API-Entwicklung entwickelt werden.
Das Merkmal von vue.js ist, dass selbst Anfänger es leicht lernen können, solange sie HTML, CSS und Javascript verstehen. Außerdem unterstützt die Formel vue.js Japanisch. Wenn Sie also ein Problem haben, können Sie es normalerweise lösen, indem Sie sich die Formel ansehen.
vue.js erleichtert das Zusammenstellen von Anwendungen in Einheiten, die als Komponenten bezeichnet werden. Komponenten sind wie Teile, aus denen die Benutzeroberfläche besteht, und können immer wieder verwendet werden, indem sie gemeinsam verwendet werden.
Das Javascript-Framework wird zum Standard für die Verwendung von Technologien wie Virtual DOM und Typescript. Da vue.js auch virtuelles DOM und Typoskript unterstützt, ist eine schnellere und erweiterbarere Implementierung möglich.
【Referenz】
(vue.js offiziell) Einleitung -Was ist vue.js?
(vue.js offiziell) Vergleich mit anderen Frameworks
SPA ist eine Abkürzung für "Single Page Application" und, wie der Name schon sagt, eine Anwendung, die den Inhalt einer Seite wechselt. Spezifische Beispiele sind Slack und Google Map. In beiden Fällen können Sie neue Informationen abrufen, ohne die Seiten zu wechseln (eine Seite bleibt übrig). SPA ist ein Mechanismus, der in den letzten Jahren Aufmerksamkeit erregt hat, weil die Seitenübergangszeit kurz ist und die UX erhöht wird.
Mit vue.js können Sie ganz einfach ein SPA erstellen.
【Referenz】 Grundlagen von SPA (Single Page Application)
Lassen Sie uns nun die grundlegende Grammatik von vue.js überprüfen.
Es gibt drei Arten der Installation von vue.js: "CDN", "npm" und "vuecli". "CDN" ist die im Body-Tag von HTML beschriebene Methode, "npm" ist die Methode zur Verwendung des Paketmanagers von node.js und "vuecli" ist die Methode zur Verwendung des Befehls vue im Terminal. Dieses Mal werde ich "CDN" verwenden. Erstellen Sie die Datei index.html entsprechend und beschreiben Sie sie wie folgt.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
</div>
<script>
new Vue({
el: "#app",
})
</script>
</body>
</html>
Das Obige ist die Vorbereitung der Datei für die Verwendung von vue.js. Ich werde die detaillierte Grammatik ab dem nächsten erklären, aber ich werde alles im Head-Tag, Body-Tag und CDN-Aufruf-Teil weglassen.
index.html
<div id="app">
<p>{{message}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
message: "HelloWorld",
}
})
</script>
index.html
<div id="app">
<p>{{greeting()}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
message: "HelloWorld",
},
methods: {
greeting: function(){
return this.message;
}
}
})
</script>
■v-bind
index.html
<div id="app">
<a v-bind:href="url"> qiita <a>
</div>
<script>
new Vue({
el: "#app",
data: {
url: "https://qiita.com/"
}
})
</script>
--Dinge, die mit "v-" beginnen, werden als Direktiven bezeichnet und beziehen sich auf die Attribute von vue.js, die in der Vorlage verwendet werden können.
■v-on
index.html
<div id="app">
<p>num<p>
<button v-on:click="countUp"> COUNT UP </button>
</div>
<script>
new Vue({
el: "#app",
data: {
num: 0
},
methods: {
countUp: function() {
this.num += 1
}
}
})
</script>
index.html
<div id="app">
<p>num<p>
<button v-on:click="countUp(4)"> COUNT UP </button>
<p v-on:mousemove="change($event, 3)"> Change
<span v-on:mousemove.stop> No Change </span> <p>
<P> {{x}}: {{y}}
</div>
<script>
new Vue({
el: "#app",
data: {
num: 0
},
methods: {
countUp: function(times) {
this.num += 1 * times
},
change: function(event, square) {
this.x = event.clientX * square
this.y = event.clientY * square
}
})
</script>
■v-model
index.html
<div id="app">
<input type="text" v-model="message">
<p>{{message}} <p>
</div>
<script>
new Vue({
el: "#app",
data: {
message: "hello!"
}
})
</script>
■computed
index.html
<div id="app">
<button @click="count += 1"> COUNT UP </button>
<p>{{lessThanThree}} <p>
</div>
<script>
new Vue({
el: "#app",
data: {
count: 0
},
computed: {
lessThanThree: function() {
return this.count >= 3 ? "3 oder mehr" : "Weniger als 3"
}
})
</script>
■watcher
index.html
<div id="app">
<button @click="count += 1"> COUNT UP </button>
<p>{{lessThanThree}} <p>
</div>
<script>
new Vue({
el: "#app",
data: {
count: 0
},
computed: {
lessThanThree: function() {
return this.count >= 3 ? "3 oder mehr" : "Weniger als 3"
},
watch: {
count: function() {
var vm = this;
setTimeout(function(){
vm.count = 0
}, 3000)
}
}
})
</script>
―― „Beobachten“ ist ein asynchroner Prozess.
index.html
<div id="app">
<p :class="classObject"> Hello </p>
<button @click="Active = !Active"> Change </button>
<h1 :style="styleObject"> Hello </h1>
</div>
<script>
new Vue({
el: "#app",
data: {
styleobject: {
color: 'red',
'background-color': 'blue'
},
Active: true
},
computed: {
classObject: function(){
return{
red: this.Active,
'bg-blue': !this.Active}
}
}
})
</script>
■v-if
index.html
<div id="app">
<template v-if="ok">
<p>Hello</p>
<p>Goodbye</p>
</template>
<template v-else-if="maybe">
<p>good morning</p>
<p>good night</p>
</template>
<p v-else="ok"> sorry </p>
</div>
<script>
new Vue({
el: "#app",
data: {
ok: true,
maybe: true
}
})
</script>
―― „Vorlage“ hat fast die gleiche Rolle wie div, aber die Funktion ist, dass „Vorlage“ nicht angezeigt wird, wenn Sie sie tatsächlich in einem Browser anzeigen.
■v-for
index.html
<div id="app">
<ul>
<div v-for="fruit in fruits" :key="fruit">
<p>{{fruit}}</p>
<hr>
</div>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
fruits: ['Apfel', 'Pfirsiche', 'Traube']
}
})
</script>
【udemy】 "Super Vue.js 2 Komplettpaket - Keine weiteren Materialien mehr kaufen! (Einschließlich Vue Router und Vuex) ” → Empfohlen! Dieser Artikel basiert auch auf dem, was ich in diesem Kurs gelernt habe. Es wird sorgfältig anhand der Grundlagen erklärt, und da es die SPA-Entwicklung berührt, kann dies allein die Grundlagen von vue abdecken.
"Vue JS Primer Definitive Edition! Webentwicklung ohne jQuery --- Lernen Sie systematisch von der Einführung in die Anwendungsentwicklung mit Videos “ → Ich dachte, es wäre gut, die Grammatik im Detail zu erklären.
Recommended Posts