Vorstellung von Vue und Weex für native Mobile Apps

Vue ist ein beliebtes JavaScript-Framework für Web-Apps, das eine einfache Bindung zwischen Daten im Speicher und der Benutzeroberfläche ermöglicht. Mit Weex können wir jetzt native mobile Apps mithilfe des Vue-Frameworks codieren!

Warum verwenden wir Vue und andere Datenbindungs-Frameworks wie Angular und React? Was ist das Besondere an ihnen? Wir verwenden sie, um sicherzustellen, dass die im Speicher gespeicherten Anwendungsdaten mit der Benutzeroberfläche synchronisiert werden und umgekehrt. 

Wir nutzen diese Frameworks auch, um Anwendungen sehr schnell und leistungsoptimiert erstellen zu können.

In diesem Tutorial zeige ich Ihnen, wie Sie das Vue-Framework verwenden, insbesondere, wie Sie die Konzepte der Datenbindung und der Vorlagen verstehen. Anschließend werde ich die Weex-Plattform vorstellen, mit der native mobile Apps mit Vue codiert werden können!

Datenbindung

Schauen wir uns ein einfaches Beispiel an, um zu verstehen, wie uns diese Frameworks tatsächlich Zeit sparen können. Was wir wollen, ist ein einfaches Eingabefeld, das mit unseren Anwendungsdaten synchron bleibt. Unsere App selbst kann die Daten programmgesteuert ändern, und der Benutzer kann sie über Benutzereingaben ändern. Daher müssen wir sowohl die Benutzeroberfläche als auch die Anwendungsdaten überwachen.

Das Schreiben von Code, der diese Datenbindung unterstützt, wäre ausführlich. Wir müssen Ereignis-Listener und Proxy-Objekte und Observables erstellen, um Änderungen in den Anwendungsdaten zu erfassen. Diese Komplexität wächst und wächst, wenn weitere Arten von Daten und Eingaben hinzugefügt werden. Vue und andere Datenbindungs-Frameworks verhindern, dass wir den gesamten bindenden Code schreiben müssen. 

Wenn unser Benutzer einige Eingabedaten ändert, wird er mit Vue wie folgt mit den Anwendungsdaten synchronisiert:

Wenn die Anwendung die Daten ändert, wird die Benutzeroberfläche folgendermaßen aktualisiert:

Wenn wir die Benutzeroberfläche und die App-Daten synchron halten, bedeutet dies, dass unsere App genau das tut, was wir erwarten. Vue wird all dies verwalten und andere leistungsstarke Datenbindungsprozesse ermöglichen.

Erste Schritte

Nachdem wir nun wissen, warum wir diese Frameworks verwenden, richten wir eine einfache Vue-Anwendung ein, um einige Beispiele auszuführen. Erstellen Sie eine neue HTML-Datei an einem beliebigen Ort auf Ihrem Computer und fügen Sie den folgenden Code ein:

Dies ist eine einfache HTML-Datei, die mit der Vue JS-Bibliothek verbunden ist. Es enthält eine div Element mit der ID von App. In den Skript-Tags haben wir eine Variable aufgerufen App Damit wir auf unsere Ansicht verweisen, werde ich diesen Teil später erklären.

Dann erstellen wir eine neue Vue-Instanz oder "Ansicht". Dieser Konstruktor teilt dem Framework mit, welches Element unsere Anwendungsbenutzeroberfläche enthält und es mit den Anwendungsdaten synchronisiert. 

Doppelklicken Sie nun auf die HTML-Datei, um sie im Browser zu öffnen, und öffnen Sie das Browser-Konsolenfenster.

Textinterpolation

Durch die Interpolation von Text können wir Ausdrücke in unseren HTML-Code einbetten, die beim Rendern der Seite interpretiert werden. Die Ausdrücke sind live. Wenn also die Daten geändert werden, von denen sie abhängig sind, wird die Seite in Echtzeit aktualisiert. Dies wird als deklaratives Rendering bezeichnet. Dies ermöglicht es uns, Ausdrücke an beliebiger Stelle im Inhalt eines Elements zu platzieren. Lassen Sie uns mit einem einfachen Beispiel durchgehen.

JS

Unser JavaScript-Code enthält jetzt eine Daten Objekt, das alle unsere Anwendungsdaten für diese Ansicht speichert. Darin habe ich die erstellt Botschaft Eigenschaft mit der Zeichenfolge "Hallo Welt". 

Lassen Sie uns diese Eigenschaft als Nächstes im HTML-Format anzeigen.

HTML

 
 message message.split ("). reverse (). join (") 
 

Die Ausdrücke werden mit doppelter Klammer angegeben. Vue JS verwaltet die Abhängigkeiten der einzelnen Ausdrücke und aktualisiert die Seite live, wenn sie sich ändern. In unserem Fall haben wir zwei Ausdrücke, mit der Botschaft Eigenschaft als Abhängigkeit von jedem. Der erste Ausdruck Botschaft  Zeigt nur die Nachrichteneigenschaft an. Der Zweite message.split ("). reverse (). join (") Ausdruck nimmt die Nachrichteneigenschaft und dann:

• Teilt die Zeichenfolge in ein Array:
  [ "Hallo Welt" ]
• Kehrt die Reihenfolge des Arrays um:
  ["d", "l", "r", "o", "w", "", "o", "l", "l", "e", "h"]
• Fügt das Array zusammen, um zu erhalten "dlrow olleh", das ist die gleiche Nachricht, aber rückwärts gedruckt.

Öffnen Sie nun den Browser und aktualisieren Sie die HTML-Seite. Öffnen Sie dann das Konsolenfenster des Browsers und weisen Sie es zu app.message einen neuen Wert und sehen Sie, wie die Ausgabe im Browser aktualisiert wird.

Sie können auch Mathematik in Vorlagenausdrücken oder strukturierte Daten in Objekten verwenden. Wie Sie sich vielleicht schon gedacht haben, sind Vue-Ausdrücke nur JavaScript. Der Zugriff auf globale Variablen ist jedoch in einem Sandkasten möglich, sodass Sie darauf zugreifen können Mathematik, aber nicht Fenster. Dies trägt dazu bei, dass Ihre Apps sicher sind - und auch Ihre Benutzer. 

Durch die Verwendung von Vue mit nur wenigen Codezeilen können wir die bidirektionale Datenbindung verbessern. Dadurch wird sichergestellt, dass die Benutzeroberfläche und die Anwendungsdaten relativ einfach synchron sind. 

Richtlinien

Richtlinien sind eine weitere Möglichkeit, Daten in unseren Ansichten zu binden. Wir können sie verwenden, um Anwendungsdaten an Attribute, Ereignisse, Eingabefelder und wiederholbare Daten zu binden. Gehen wir die einzelnen Anweisungen durch und erfahren Sie, wie sie funktionieren.

• v-bind: bindet einen Attributwert
• V-Modell: bindet App-Daten an ein Eingabeelement wie a Textbereich
• v-on: Definieren Sie einen Event-Handler
• v-for: bindet an ein Array oder ein Objekt

v-bind Richtlinie

Das v-bind Direktive wird für die Attributdatenbindung verwendet. Es ermöglicht uns, Anwendungsdaten an den Wert eines Attributs zu binden. Stellen Sie sich das als Textinterpolation vor, aber innerhalb eines Attributs. Du kannst binden Klasse, Ich würde, Wert oder ein beliebiges anderes Attribut mit v-bind Richtlinie. 

Für dieses Beispiel möchte ich unsere Anwendungsdaten an die binden Datenattr Attribut mit der v-bind Richtlinie v-bind: data-attr.

JS

HTML

 
  Objekttyp  
 
 object.names 
 
 number * 20/2 
 
 [[Objekttyp, Objektnamen, Nummer * 20/2] 
 

Im obigen Beispiel haben wir ein Attribut namens gebunden Datenattr zu einer Reihe verschiedener Datenquellen. Zuerst haben wir es an das gebunden Art und Namen Eigentum von Objekt. Dann banden wir es an einen mathematischen Ausdruck und fügten alle Bindungen zu einem einzigen Array-Attribut zusammen.

Schauen Sie sich die Ausgabe im Browser an: Sie können auf klicken Elemente Registerkarte, um die Ausgabe des Werts jedes Attributs anzuzeigen.

Sie können die Anwendungsdaten in der Konsole erneut ändern, um den Datenbindungsprozess anzuzeigen.

Denken Sie an die v-bind Anweisung als Ausdrücke in Attributwerten. Dies ist unglaublich leistungsstark und mit der Vue-Bibliothek leicht einzurichten.

V-Modell Richtlinie

Diese Anweisung wird speziell verwendet, um die Anwendungsdaten mit Eingabefeldern, Textbereichen und Auswahlelementen synchron zu halten. Hier ist ein Beispiel:

JS

HTML

   
  Wählen Sie einen Namen aus Jack John Mike  Ausgewählt: selected 
  Jack  John  Mike  Jack John Mike  
 Ausgewählte Namen: checkedNames 

Für den ersten Abschnitt dieser Seite haben wir ein Texteingabefeld und einen Textbereich, die beide die V-Modell Direktive, die diese Eingabefelder mit der synchronisiert Botschaft Eigenschaft, mit v-model = "Nachricht". Auf diese Weise wird das Modell aktualisiert, wenn Sie eines ändern, und dann wird das andere Eingabefeld aktualisiert. Probieren Sie es aus!

Im nächsten Abschnitt haben wir eine Dropdown-Liste mit der ausgewählt Eigentum mit  v-model = "ausgewählt". Auf diese Weise wird unser Modell aktualisiert, wenn die Auswahl geändert wird.

Schließlich haben wir eine Mehrfachauswahl. Ich habe auf zwei Arten gezeigt, wie das geht: mit mehreren Ankreuzfeldern und mit einem Multiple-Select-Eingang. Da wir mehrere Werte haben können, habe ich die erstellt checkedNames Array, das mehrere Werte speichern kann. Der Multiple-Select-Eingang und die Kontrollkästchen haben jeweils ein V-Modell Direktive für die checkNames Eigentum. Probieren Sie es aus und sie sollten synchron bleiben, wenn Sie eine Auswahl treffen.

Das v-on Richtlinie

Mit dieser Direktive können Ereignisse an HTML-Elemente angehängt werden. Diese Direktive kann für bestimmte Elemente verwendet werden, an die Eingabeereignisse angehängt werden können, z. B. Schwebeflug, Klicks, Texteingabe, Tastendruck usw. In diesem Beispiel erstellen wir eine einfache Schaltfläche mit einem Klickereignis.

JS

HTML

 Klick mich! geklickt 

In dem v-on Direktive, nach dem Doppelpunkt geben wir das Ereignis an, das wir anhängen möchten. In diesem Beispiel, wenn die klicken Ereignis wird ausgelöst, wir werden einige Ausdrücke ausführen. Zuerst öffnen wir ein Benachrichtigungsdialogfeld und ändern dann den Wert von angeklickt Eigentum. Beachten Sie, dass Sie Funktionen in aufrufen können v-on Ausdrücke.

v-for Richtlinie

Diese Richtlinie ist eine der mächtigsten von allen. Wir können jedes Objekt oder Array auf Änderungen überprüfen und wiederholt einen Teil unseres Vorlagencodes für jede in diesem Objekt oder Array gefundene Eigenschaft oder Element wiedergeben. Um beispielsweise ein Array von Namen als Liste wiederzugeben:

JS

HTML

 
 
 Name 
 
 

In diesem Beispiel fügen wir zuerst die v-for Direktive auf das Element, das Sie wiederholen möchten. Der Wert der Direktive gibt das Objekt oder das Array an, über das ich iterieren möchte (Namen) sowie eine Variable, die den Wert für jede Iteration enthält (Name). Innerhalb dieses wiederholten Elements können wir nun die Name Variable in Ausdrücken.

Wenn wir das Array dann ändern, zum Beispiel mit einer Methode wie drücken, Sortieren oder umkehren, Die Vorlagendaten werden automatisch aktualisiert. Führen Sie das Beispiel aus und ändern Sie das Array im Konsolenfenster.

Komponenten

Der Datenbindungsprozess erfolgt in Ansichten. Komponenten sind nur wiederverwendbare Ansichten, die wir in unserer gesamten Anwendung wiederholen können. Jede Komponente muss über einige Vorlagendaten verfügen, die als Teil der Benutzeroberfläche dargestellt werden sollen, sowie einige Anwendungsdaten. Sie können optional ein wenig Styling hinzufügen, wenn Sie möchten.

Lass uns die verwenden v-for Anweisung erneut, Listenelemente auszugeben. Aber dieses Mal machen wir jedes Element zu einer Komponente. Wir geben dieser Komponente einen Namen, damit wir sie innerhalb unseres Vorlagencodes anvisieren können: Listenpunkt. Komponenten können auch "registrierte Eigenschaften" haben, denen wir einen Wert zuweisen können, der beim Erstellen der Komponente zugewiesen wird. In meinem Fall die Listenpunkt Komponente erwartet einen Wert für die Name Eigenschaft, definiert mit Requisiten: ["Name"]. 

Lassen Sie uns nun diese Komponente erstellen. Bitte fügen Sie folgenden Code in Ihre Skript-Tags ein:

JS

Vue.component ('list-item', template: ')
 Name 
', Requisiten: ["Name"]);

Stellen Sie außerdem sicher, dass Sie über die folgenden Anwendungsdaten verfügen:

var app = new Vue (el: '#app', Daten: Namen: ["Lawrence", "John", "Mike", "Justin"]);

HTML

Hier sieht man die Listenpunkt Die Komponente wird für jeden im Array gefundenen Namen wiederholt. Jeder Name wird der Namensvariable zugewiesen, die in definiert ist v-for Richtlinie. Wir übergeben die Name Eigenschaft für die Komponente verwenden v-bind.

Jede Instanz ist nur eine Kopie der Komponente. Wir können jede Kopie oder Instanz unabhängig voneinander modifizieren. Stellen Sie sich Komponenten als den Blueprint und die Instanzen als Kopien vor, die vom Blueprint erstellt wurden. Hier ist das Endergebnis:

Compilation und die Vue-CLI

Wir haben mit einer sehr einfachen HTML-Datei gearbeitet und lassen Vue zur Laufzeit alles interpretieren. Vue enthält jedoch ein Befehlszeilentool. Sie fragen sich vielleicht warum. Ein Grund ist, dass vorkompilierte Seitenvorlagen eine bessere Leistung erbringen als Vorlagen, die Vue zur Laufzeit interpretiert. Ein weiterer Grund besteht darin, dass die Entwicklung einer umfangreichen Anwendung, die in eine HTML-Datei eingefügt werden soll, schnell unüberschaubar wird. 

Wir brauchen Modularität, um eine große Anwendung in kleinere Teile zu zerlegen. 

Installieren der Vue-CLI

Um die Befehlszeile verwenden zu können, müssen Sie das Konsolenfenster für Ihr Betriebssystem öffnen.

• Bei Mac drücken Sie Befehlsraum und dann tippen Terminal und schlagen Rückkehr.
• Suchen Sie unter Windows nach der Eingabeaufforderung im Startmenü. Klicken Sie mit der rechten Maustaste und "als Administrator öffnen ".
• Bei Linux drücken Sie Strg-Alt-T.

Stellen Sie vor dem Fortfahren sicher, dass Sie die neueste Version von Node.js installiert haben. Dann müssen wir Webpack installieren, das die Dateigröße unseres Projekts komprimiert und in unserem Browser schneller macht. Dann können wir die Vue-CLI installieren und die entsprechenden Befehle für Ihre Plattform ausführen:

Mac und Linux

• sudo npm install -g webpack
• sudo npm install -g vue-cli

Windows (stellen Sie sicher, dass Sie die Konsole als Administrator ausführen)

• npm install -g webpack
• npm install -g vue-cli

Das ist es! Jetzt können Sie mit der Einrichtung unseres erweiterten Webpack-Projekts beginnen. Navigieren Sie zunächst zu dem Verzeichnis, in dem wir unser Projekt erstellen möchten, in meinem Fall dem Desktop, und erstellen Sie dann das Projekt. Sie können ersetzen meine App mit einem beliebigen Projektnamen, den Sie möchten.

• vue init webpack meine App
  

Sie werden durch eine Reihe von Fragen zu Ihrem Projekt geführt. Sie werden aufgefordert, Daten wie Titel und Beschreibung einzugeben, und Sie werden gefragt, ob Sie Plugins von Drittanbietern installieren möchten. In diesem Beispiel können Sie alle optionalen Extras mit Nein beantworten. Nach der Erstellung müssen die Abhängigkeiten installiert werden. Navigieren Sie daher zum Projektverzeichnis, und wir führen den Installationsbefehl aus.

• CD meine App
• npm installieren

Lassen Sie NPM alle Abhängigkeitspakete installieren, und dann können wir weitermachen. 

Ein Vue-Projekt erstellen

Sobald die Pakete installiert sind, können wir den Entwicklungsserver durch Eingabe ausführen npm run dev. Ihr Browserfenster sollte sich öffnen und die folgende Seite anzeigen.

Wir werden nicht die Struktur des gesamten Projekts durchgehen, sondern wenn Sie das öffnen meine App Verzeichnis sehen Sie das src Verzeichnis. Es enthält ein App.vue Datei A main.js Datei und in der Komponenten Verzeichnis, das Hallo.vue Datei.

Die Vue-Dateien sind Komponenten. Das main.js file konfiguriert die ursprüngliche Ansicht und möglicherweise auch andere Konfigurationen. Werfen wir einen Blick auf die App.vue und Hallo.vue Dateien.

Hier sehen Sie, dass jede Vue-Komponente in drei Teile unterteilt ist: