einführen
Verzeichnis
Was ist Vue.js
Vue (ausgesprochen /vju?/, ähnlich wie view) Es handelt sich um ein progressives Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen großen Frameworks ist Vue so konzipiert, dass es Schicht für Schicht von unten nach oben aufgetragen werden kann. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene, die nicht nur einfach zu starten ist, sondern auch leicht in Bibliotheken von Drittanbietern oder bestehende Projekte integriert werden kann. Andererseits ist Vue in Kombination mit der modernen Toolkette und verschiedenen Unterstützungsbibliotheken auch vollständig in der Lage, Treiber für komplexe Single-Page-Anwendungen bereitzustellen.
Wenn Sie mehr über Vue erfahren möchten, bevor Sie sich darauf einlassen, haben wir ein Video produziert, das Sie durch die Kernkonzepte und ein Beispielprojekt führt.
Wenn Sie bereits ein erfahrener Frontend-Entwickler sind und den Unterschied zwischen Vue und anderen Bibliotheken/Frameworks kennenlernen möchten, schauen Sie sich bitte Andere Frameworks vergleichen an.
Erste Schritte
Der offizielle Leitfaden geht davon aus, dass Sie sich bereits mit HTML auskennen. CSS und mittlere Kenntnisse in JavaScript. Wenn Sie gerade erst anfangen, sich mit der Front-End-Entwicklung vertraut zu machen, ist die Verwendung eines Frameworks als erster Schritt möglicherweise nicht die beste Idee – machen Sie sich mit den Grundlagen vertraut, bevor Sie wiederkommen! Vorkenntnisse mit anderen Frameworks sind hilfreich, aber nicht erforderlich.
Der einfachste Weg, Vue.js auszuprobieren, ist die Verwendung des Hello World-Beispiels auf JSFiddle. Sie können es in einem neuen Tab in Ihrem Browser öffnen und den Beispielen folgen, um einige grundlegende Verwendungsmöglichkeiten zu erlernen. Oder Sie können eine .htmlDatei erstellen und Vue dann wie folgt einführen:
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
oder:
<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
Installationsanleitung mit weiteren Möglichkeiten Vue installieren. Bitte beachten Sie, dass wir Anfängern nicht empfehlen, es direkt zu verwenden vue-cli, insbesondere wenn Sie noch nicht mit Node.js-basierten Build-Tools vertraut sind.
Wenn Sie interaktive Dinge mögen, können Sie sich auch diese Reihe von Tutorials zu Scrimba ansehen, die Bildschirmaufzeichnung und Code-Experimente kombiniert und es Ihnen ermöglicht, jederzeit zu pausieren und zu spielen.
Deklaratives Rendering
Im Kern ist Vue.js ein Framework, das dies ermöglicht Der Einfachheit halber Vorlagensyntax zum deklarativen Rendern von Daten im DOM System:
<div id="app">
{{ message }}
</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})Ausgabe:
Hello Vue!
Wir haben unsere erste Vue-Anwendung erfolgreich erstellt! Es sieht dem Rendern einer String-Vorlage sehr ähnlich, aber Vue erledigt viel Arbeit im Hintergrund. Nachdem die Daten nun mit dem DOM verbunden sind, ist alles responsiv. Wie bestätigen wir das? Öffnen Sie die JavaScript-Konsole Ihres Browsers (auf dieser Seite öffnen) und ändern Sie den Wert von app.message. Das obige Beispiel wird entsprechend aktualisiert.
Zusätzlich zur Textinterpolation können wir auch Elementeigenschaften wie folgt binden:
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})Ausgabe:
鼠标悬停几秒钟查看此处动态绑定的提示信息！
Hier stoßen wir auf etwas Neues. Das angezeigte v-bind-Attribut wird als -Direktive bezeichnet. Direktiven wird v- vorangestellt, um anzuzeigen, dass es sich um spezielle, von Vue bereitgestellte Funktionen handelt. Wie Sie vielleicht schon vermutet haben, wenden sie ein spezielles Reaktionsverhalten auf das gerenderte DOM an. Die Bedeutung dieser Anweisung lautet hier: „Machen Sie das title-Attribut dieses Elementknotens mit dem message-Attribut der Vue-Instanz konsistent.“
Wenn Sie die JavaScript-Konsole des Browsers erneut öffnen und app2.message = '新消息' eingeben, sehen Sie erneut, dass der an das title-Attribut gebundene HTML aktualisiert wurde.
Bedingungen und Schleifen
Steuern Sie, ob ein Element gewechselt werden soll Auch die Anzeige ist ganz einfach:
<div id="app-3"> <p v-if="seen">现在你看到我了</p> </div>rrree
Ausgabe:
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})Weiter in die Konsole tippen app3.seen = false, Sie werden feststellen, dass die zuvor angezeigte Meldung verschwindet.
Dieses Beispiel zeigt, dass wir Daten nicht nur an DOM-Text oder -Attribute, sondern auch an DOM-Strukturen binden können. Darüber hinaus bietet Vue auch ein leistungsstarkes Übergangseffektsystem, das automatisch Übergangseffekte anwenden kann, wenn Vue Elemente einfügt/aktualisiert/entfernt.
Es gibt viele weitere Befehle, jeder mit speziellen Funktionen. Beispielsweise kann die v-for-Direktive ein Datenarray binden, um eine Liste von Elementen darzustellen:
现在你看到我了
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>Ausgabe:
Geben Sie in der Konsole Folgendes ein app4.todos.push({ text: '新项目' }), am Ende der Liste finden Sie einen neuen hinzugefügten Eintrag.
Umgang mit Benutzereingaben
Um Benutzern die Interaktion mit Ihrer App zu ermöglichen, können wir < 🎜 verwenden >-Direktive fügt einen Ereignis-Listener hinzu, über den sie in Vue aufgerufen wird In der Instanz definierte Methoden: v-on
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div> Ausgabe: 
den Status der App aktualisieren. Berühren Sie jedoch nicht das DOM – alle DOM-Vorgänge werden von Vue verarbeitet, und der Code, den Sie schreiben, muss sich nur auf die logische Ebene konzentrieren. reverseMessage
-Direktive, mit der problemlos eine bidirektionale Bindung zwischen Formulareingabe und Anwendungsstatus erreicht werden kann. v-model
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})rrreeAusgabe: 
Komponentisierte Anwendungskonstruktion
Das Komponentensystem ist Vue Ein weiteres wichtiges Konzept ist, dass es sich um eine Abstraktion handelt, die es uns ermöglicht, große Anwendungen mit kleinen, unabhängigen und oft wiederverwendbaren Komponenten zu erstellen. Wenn Sie sorgfältig darüber nachdenken, kann fast jede Art von Anwendungsschnittstelle in einen Komponentenbaum abstrahiert werden:
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div> Jetzt können Sie damit eine weitere Komponentenvorlage erstellen: var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
}) Dadurch wird jedoch für jedes Aufgabenelement derselbe Text gerendert, der wie folgt aussieht Nicht cool. Wir sollten in der Lage sein, Daten vom übergeordneten Bereich an die untergeordnete Komponente zu übergeben. Ändern wir die Komponentendefinition so, dass sie ein prop akzeptiert:
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
}) Jetzt können wir verwenden Die Direktive übergibt die zu erledigenden Elemente an jede Komponente der Schleifenausgabe: v-bind
<ol> <!-- 创建一个 todo-item 组件的实例 --> <todo-item></todo-item> </ol>
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义特性。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
}) Ausgabe: 
Obwohl dies nur ein bewusstes Beispiel ist, ist es uns gelungen, die Anwendung in zwei kleinere Einheiten aufzuteilen. Untergeordnete Einheiten sind über die Requisitenschnittstelle gut von ihren übergeordneten Einheiten entkoppelt. Wir können die <todo-item>-Komponente jetzt weiter verbessern, um komplexere Vorlagen und Logik bereitzustellen, ohne die übergeordnete Einheit zu beeinträchtigen.
In einer großen Anwendung ist es notwendig, die gesamte Anwendung in Komponenten zu unterteilen, um die Entwicklung einfacher zu verwalten. Wir werden die Komponenten in einem Folge-Tutorial im Detail besprechen, aber hier ist eine (hypothetische) Beispiel, um zu zeigen, wie eine App-Vorlage mit Komponenten aussieht:
<div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量，即其内容可以是动态的。 我们也需要为每个组件提供一个“key”，稍后再 作详细解释。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item> </ol> </div>
Beziehung zu benutzerdefinierten Elementen
Sie haben vielleicht bemerkt, dass Vue-Komponenten Custom Elements sehr ähnlich sind – das ist es Teil der Web Component Specification, da sich der Komponentensyntaxteil von Vue auf diese Spezifikation bezieht. Beispielsweise implementiert die Vue-Komponente die Funktionen Slot API und is. Es gibt jedoch einige wesentliche Unterschiede:
Die Web Components-Spezifikation wurde fertiggestellt und verabschiedet, wird jedoch nicht von allen Browsern nativ implementiert. Derzeit unterstützen Safari 10.1 , Chrome 54 und Firefox 63 Webkomponenten nativ. Im Gegensatz dazu erfordern Vue-Komponenten keine Polyfills und verhalten sich in allen unterstützten Browsern (IE9 und höher) konsistent. Bei Bedarf können Vue-Komponenten auch in native benutzerdefinierte Elemente eingebettet werden.
Vue-Komponenten bieten einige wichtige Funktionen, die reine benutzerdefinierte Elemente nicht haben. Die wichtigsten sind der komponentenübergreifende Datenfluss, die benutzerdefinierte Ereigniskommunikation und die Build-Tool-Integration.
Obwohl Vue intern keine benutzerdefinierten Elemente verwendet, weist die Anwendung immer noch eine gute Interoperabilität auf, wenn die Anwendung benutzerdefinierte Elemente verwendet oder in Form von benutzerdefinierten Elementen veröffentlicht wird. Die Vue-CLI unterstützt auch den Aufbau von Vue-Komponenten in native benutzerdefinierte Elemente.
Bist du bereit?
Wir haben gerade kurz die grundlegendsten Funktionen von Vue Core vorgestellt – der Rest dieses Tutorials wird diese und andere erweiterte Funktionen ausführlicher behandeln, also lesen Sie unbedingt das gesamte Tutorial!
