Im einleitenden Beitrag dieser Serie haben wir ein wenig darüber gesprochen, wie Webdesigner von Vue profitieren können. In diesem Lernprogramm erfahren Sie, wie Sie Vue zum Laufen bringen und einige der ersten Fragen beantworten, die Sie möglicherweise haben.

So fügen Sie Ihrem Projekt Vue hinzu

Vue ist nur JavaScript, dh Sie können es laden, indem Sie ein Skript-Tag in Ihr HTML-Dokument einfügen. Vues Website empfiehlt die Verwendung eines CDN wie https://cdn.jsdelivr.net/npm/vue um sicher zu sein, die neueste version zu erhalten. Sie können auch andere versionsspezifische Links verwenden https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js.

Hinweis: Wenn Sie eine Produktionsanwendung erstellen, wird empfohlen, einen Paketcontroller wie zu verwenden Garn Verwalten Sie alle Ihre Abhängigkeiten und stellen Sie sie an CDN-basierten Standorten bereit. Dies ist besonders wichtig, wenn Sie Vue in Ihr JavaScript-Paket integrieren möchten, beispielsweise mit einem Webpack. 

Markup und Vorlagen verstehen

Beim Erstellen einer Vue-Instanz können Sie die el Option im Konfigurationsobjekt, um Ihre Instanz mit dem DOM zu verbinden. Das el Option sollte entweder ein Element oder eine CSS-Auswahlzeichenfolge sein. Dieses Element kann auch Vorlagencode enthalten. Im HTML-Code Ihrer Seite könnten Sie etwa Folgendes haben:

 
Titel
 
Inhalt
 

Und dann hätten Sie in Ihrem JavaScript so etwas:

var app = new Vue (el: "#app", data: title: "Threat Level Midnight"), Inhalt: "AGENT MICHAEL SCARN, robust, ohne es zu bemühen, entspannt sich an seinem Schreibtisch, die Füße hoch und prüft eine Fallakte Seine Waffenreste neben seinem FBI-Abzeichen, das im blitzenden Neonlicht des Büros funkelt. In einem Anzug gekleidet, löst er seine Krawatte, löst einige Knöpfe und zeigt seine behaarte Brust. ",)

Beachten Sie wieder, dass die "#app" String bezieht sich auf das div in Ihrem HTML-Code. Vue ersetzt den inneren Inhalt dieses div durch das Ergebnis des Wiedergabeschritts von Vue.

Was macht Vue im Hintergrund?

Wir haben festgestellt, dass Vue es uns ermöglicht, unsere Sicht von unseren Daten zu trennen. Eine Logik kann in der Ansicht selbst ausgeführt werden, aber wir können die folgenden Muster vermeiden, die zu schlechtem Code oder einem falschen Status führen:

• Speichern / Lesen von Daten im DOM
• Aktualisieren des DOM mit direkter DOM-Manipulation und -änderung anstelle von Vorlagenrendering
• Verwenden von prozeduralen Methoden, um den Zustand auf unzusammenhängende Weise zu bewerten, die häufig zu einer DOM-Darstellung führen, die nicht dem beabsichtigten Zustand entspricht

Wie funktioniert das??

Mit Vue können Sie Informationen in einstellen Daten Möglichkeit. Jedes Schlüssel-Wert-Paar, das innerhalb dieses Objekts übergeben wird, wird auf Änderungen überprüft und alles, was von diesem Datenelement abhängt, ist wiedergegeben wenn sich die Daten ändern.

Was dies im Wesentlichen bedeutet, ist das Daten Objekt ist reaktiv. Wenn Sie die integrierten Datenmanipulationsmethoden von JavaScript verwenden, löst die Änderung die Rendering-Engine von Vue aus.

Wenn Ihr Datenobjekt beispielsweise so eingerichtet ist:

var vm = new Vue (el: "#app", data: items: []);

Mit diesem Vorlagencode:

 
item.text
 

Und später fügen Sie einige Elemente hinzu:

vm.items = [text: "Tag der Vielfalt", text: "Beach Trip"]

Die Vorlage wird automatisch erneut gerendert, wobei die gesetzten Elemente wiederholt werden.

Wichtige Einschränkung für die Reaktivität

Wie die JavaScript-Funktion, mit der Vue das sehen kann Daten object (Objekt-Getter und -Setter) liefert keine Informationen, wenn neue Schlüssel hinzugefügt oder vorhandene Schlüssel entfernt werden. Durch das Hinzufügen und Entfernen von Schlüsseln wird kein erneutes Rendern ausgelöst. Wenn also in demselben Beispiel das ursprüngliche Datenobjekt leer ist (Artikel: [] ist nicht anwesend):

var vm = new Vue (el: "#app", data: )

Jede Änderung an vm.items löst kein erneutes Rendern aus. Aus der Vue-Dokumentation: 

"Vue erlaubt nicht das dynamische Hinzufügen neuer reaktiver Eigenschaften auf Stammebene zu einer bereits erstellten Instanz."

Beachten Sie außerdem, dass beim Hinzufügen von Elementen zu einem Array mit der Syntax array [index] = 'neuer Wert', Das erneute Rendern wird nicht ausgelöst. Verwenden Sie stattdessen Spleiß oder Vues Vue.set Methode, die den Rahmen dieses Artikels sprengen würde. Zeigen Sie die Liste der Vorbehalte in der Vue-Dokumentation an.

Neben jQuery und anderen Bibliotheken arbeiten

Vue steht nicht in Konflikt mit jQuery, Underscore oder einer anderen beliebten JavaScript-Dienstprogrammbibliothek. Sie sollten jedoch zweimal überlegen, ob Sie versuchen, Vue neben einem anderen JavaScript zu verwenden Rahmen wie React.

Es ist wahrscheinlich, dass Sie dies nicht unbedingt tun brauchen jQuery zusätzlich zu Vue, aber es ist möglich, dass Sie es in anderen Bereichen Ihrer Anwendung verwenden möchten, die nicht von Vue gerendert werden.

Vue bietet auch "Hooks" zur Integration in andere Bibliotheken, z. B. um Animationen auszuführen.

Babel oder einen anderen Transpiler verwenden

Vue verlangt von Babel nicht, dass Sie damit produktiv sind. In Babel können Sie jedoch einige der forefront-Spezifikationen von JavaScript verwenden, beispielsweise Vorlagenzeichenfolgen und komplexere Array-Bearbeitungstechniken.

Vue benötigt keine speziellen Build-Systeme, wodurch es für designorientierte Entwickler, die gewohnt sind, kleine Mengen an JavaScript zu schreiben, sehr gut zugänglich ist, und dennoch leistungsstark genug ist, um in komplexere Build-Systeme und vollständige Einzelseitenanwendungen integriert zu werden.

Vue mehrfach auf derselben Seite verwenden

Sie können nicht nur mehrere Vue-Instanzen auf derselben Seite haben, Sie können sogar auf dasselbe zugrunde liegende Datenobjekt auf derselben Seite verweisen. In unserem vorherigen Datenlistenbeispiel beispielsweise, wenn unser JavaScript so aussah:

var sharedObject = items: [] let vm = new Vue (el: "#app", data: sharedObject) vm.items = [text: "Tag der Vielfalt", text: "Beach Trip" ]

Das Ergebnis der Verwendung dieser Vorlage wäre das gleiche wie in unserem vorherigen Beispiel:

 
item.text
 

Wir können jedoch auch eine zweite Instanz von Vue hinzufügen, die auf dieselbe zugrunde liegende Datendarstellung verweist:

var vm2 = new Vue (el: "# app2", data: sharedObject)

Wir könnten dann beispielsweise die Anzahl der Elemente in der Liste anzeigen:

 
items.length
 

Dies kann natürlich nicht das gewünschte Verhalten sein. Möglicherweise möchten Sie zwei Komponenten erstellen, die nicht an dasselbe zugrunde liegende Objekt gebunden sind und ohne Probleme funktionieren.

Wenn Sie zwei separate Instanzen erstellen möchten Start mit dem gleichen zugrunde liegenden Objekt können Sie die Objektzuweisung Methode, um neue Kopien desselben Objekts zu erstellen.

let vm2 = new Vue (el: "# app2", data: Object.assign (, sharedObject))

Fazit

Vue ist eine ausgezeichnete Wahl für Entwickler, die ein leichtes Framework suchen, das einfach zu implementieren ist, in Zukunft aber ein robusteres Framework benötigt. Vue wird mit Ihren Bedürfnissen skalieren. Wenn Sie die Verwendung von Vue in verschiedenen Szenarien verstehen (und eine Vorstellung davon haben, was unter der Oberfläche passiert), erhalten Sie ein sehr leistungsfähiges Toolset, mit dem Sie vom ersten Tag an produktiv arbeiten können.

Im nächsten Tutorial werden wir mehr über den einzigartigen Wert, den Vue bietet, behandeln, indem wir einige Beispiele für den sauberen Code von Vue betrachten. Wir sehen uns dort!

Lernen Sie Vue.js

Lernen Sie Vue.js mit unserem kompletten Vue.js Tutorial, egal ob Sie ein erfahrener Programmierer sind oder ein Webdesigner, der nach neuen Front-End-Entwicklungstechniken sucht.