Grundsätzlich haben wir alle Richtlinien auf der offiziellen Website geklärt: http://vuejs.org/guide/index.html Hier nehmen wir eine Todo -List -Anwendung als Beispiel, um alle relevanten einzigen einzigen zu entsprechen. Der gesamte Code in diesem Artikel befindet sich auf Github https://github.com/lihongxun945/vue-todolist
Vue -Instanz
Eine VUE -Anwendung wird von einem Root Vue -Instanzstart gestartet, und die Vue -Instanz wird so erstellt:
var vm = new Vue ({// Optionen})Eine Instanz ist tatsächlich eine VM im MVVM. Alle Attribute in Daten im eingehenden Konfigurationsobjekt werden an der Instanz montiert. Um Konflikte zu vermeiden, werden Vue-integrierte Methoden mit den Eigenschaften mit $ an die Instanz montiert.
Die Instanz wird den folgenden Lebenszyklus von der Schöpfung zur Zerstörung durchlaufen:
Während der Initialisierung rund drei Schritte:
• Bindungsdatenüberwachung, dh Überwachung von Daten
• Vorlagen zusammenstellen
• Dokument einfügen oder das entsprechende DOM ersetzen
# Vue Basic Syntax
Datenbindung
Vue verwendet eine Mastache -Syntax. Häufig verwendete Bindungssyntaxe werden in verschiedene Kategorien unterteilt:
• Mastache -Syntax wie {{Daten}} {{Data | Filter}}
• V-Bind-Bindungseigenschaften wie V-Bind: HREF, V-BIND: Klasse
• V-On-Bindungsereignisse wie V-on: Click, V-on: Senden
Unter ihnen ist V-* Richtlinie
Beispiel:
<div v-bind: class = "[classa, isb? classB: '']">
Attributberechnung
Vue unterstützt eine sehr interessante Attributberechnungssyntax. Sie können angeben, dass ein Attribut durch andere Attribute berechnet wird, sodass Sie $ Watch nicht verwenden müssen, um es zu implementieren:
var vm = new vue ({el: '#example', data: {a: 1}, berechnet: {// a berechneter Getter B: function () {// `this` zeigt auf die VM -Instanz zurück. A + 1}}})## Die Syntax, die sich auf Prozesssteuerung und Liste bezieht
Bilden
Zwei-Wege-Datenbindung:
<Eingabe type = "text" v-model = "message" placeholder = "bearbeiten me">
<Eingabe type = "checkBox" id = "Jack" value = "Jack" v-Model = "CheckedNames">
## Die Implementierungsmethode der Animation entspricht der von Angular und React und wird durch Hinzufügen und Löschen von Klassen implementiert. # Komponente
Grundnutzung von Komponenten
Die Definition der Komponente umfasst zwei Teile:
1 Komponentenklasse erstellen:
var profile = vue.extend ({template: "<div> lily </div>"});2 Registrieren Sie einen TagName:
Vue.comPonent ("me-profile", Profil);
Auf diese Weise können wir diese Komponente über TagName verwenden:
<div id = "todo"> <my-profile> </my-profile> <Form
Vue.comPonent ("me-profile", Profil); ist eine globale Registrierung. Wenn es nur auf einer bestimmten Seite verwendet wird, kann es lokal registriert werden:
var vm = new Vue ({el: "#todo", Komponenten: {"My-Profil": Profil}, ...}Da unsere VUE-Instanz an das Todo-Element gebunden ist, ist sie ungültig, wenn My-Profil außerhalb dieses Elements platziert wird. Nur wenn man es hineinlegt, wird es durch diese Instanz von Vue initialisiert.
Anmerkungen:
Die Parameter, die vom Vue -Konstruktor übergeben werden können, können im Grunde genommen auf Vue.extend verwendet werden. Sie müssen jedoch auf die beiden Parameter von EL und Daten achten. Um zu vermeiden, dass das gleiche Objekt zwischen verschiedenen Instanzen geteilt wird, ist es zuverlässiger, ein neues Objekt immer über die Funktion zurückzugeben:
var mycomponent = vue.extend ({data: function () {return {a: 1}}})Da die Parameter gleich sind, sind sie tatsächlich dasselbe, aber einer ist eine Komponente und der andere wird verwendet, um den Vue zum Starten zu führen.
Anmerkungen zu Vorlagen
Da Vue ein nationales DOM ist, erfüllen einige benutzerdefinierte Tags möglicherweise nicht den DOM -Standard. Wenn Sie beispielsweise einen TR in der Tabelle anpassen möchten, sollten Sie es so schreiben, wenn My-Component direkt einfügt, sondern dies nicht so schreiben:
<table> <tr is = "my-component"> </tr> </table>
Requisiten übergeben Daten
In VUE ist jede Komponente unabhängig und kann und kann nicht direkt auf die Daten der übergeordneten Klasse zugreifen. Ist es also der Methode von React sehr ähnlich, Daten durch Requisiten an Unterkomponenten weiterzugeben?
Im Gegensatz zu React müssen die Unterkomponenten in Vue zuerst ihre eigenen Requisiten deklarieren:
var profil = vue.extend ({props: ["name"], Vorlage: `<h2> {{name}} 'STO -Liste </h2> <h4> {{name}} ist ein gutes Mädchen </h4>`});Dann können wir solche Parameter übergeben, wenn wir das Profil verwenden:
<my-profile name = 'lily'> </my-profile>
Dies soll die Parameter durch Literale übergeben, sodass der übergebene Wert eine Zeichenfolge sein muss. Eine andere Möglichkeit besteht darin, die Parameter dynamisch zu übergeben und Parameter über V-Bind zu übergeben. Sie können Daten in Zwei-Wege-Wege binden oder Nicht-String-Parameter übergeben:
<My-Profil V-Bind: name = 'Eingabe'> </my-profile>
Wenn V-Bind eine Zeichenfolge ist, handelt es sich um das entsprechende Feld in den Daten der übergeordneten Komponente, beispielsweise ist das obige Wert der Wert der Eingabe, der in beide Richtungen gebunden ist. Wenn es sich um eine Zahl handelt, ist es an eine Zahl gebunden.
VUE kann auch explizit eine Einweg- oder Zwei-Wege-Datenbindung angeben:
<!-Standard, Einweg-Down-Bindung-> <child: msg = "priventmsg"> </child> <!-Explizites Zwei-Wege-Bindung-> <child: msg.sync = "parentmsg"> </child> <!-Explizit einmalige Bindung-> <child: msg.once = "parentmsg"> </child>
Requisitenüberprüfung
Eine gute Komponente sollte immer überprüfen, ob die Parameter zuerst korrekt sind, und müssen möglicherweise auch die Standardwerte einiger Parameter festlegen:
var profile = vue.extend ({input: {type: string}});Eltern-Kind-Komponentenkommunikation
Die oben genannten Requisiten sind tatsächlich eine Möglichkeit für die übergeordnete Komponente, Nachrichten an die untergeordnete Komponente weiterzugeben.
In der untergeordneten Komponente gibt es ein. Jetzt sollten wir dies jedoch vermeiden. Da die Komponente selbst die Einkapselung der unabhängigen Logik ist, zerstören Sie, wenn Sie direkt auf die Daten der übergeordneten Komponente zugreifen, die Einkapselung der Komponente.
Deshalb sollten wir immer noch durch die übergeordneten Komponenten kommunizieren, die Requisiten an die untergeordnete Komponente weitergeben.
Natürlich können Requisiten nur Rückrufe tätigen. Dieses Problem wurde in React erörtert. Die Reaktionsmethode besteht darin, Requisiten zu verwenden, um eine Rückruffunktion an die untergeordnete Komponente zu übergeben. Eigentlich mag ich diese Art, Callback -Funktionen zu übergeben, nicht wirklich, ich bevorzuge die Art der Ereignisse. Die Vue -Neutronik kann durch Ereignisse mit der übergeordneten Komponente kommunizieren. Das Senden von Nachrichten an die übergeordnete Komponente erfolgt durch diese. Hier werden Nachrichten an alle Eltern und Kinder gesendet, aber sobald ein Rückruf ausgeführt wird, wird die Rückruffunktion nicht ausgesetzt, sofern sie nicht ausdrücklich true.
Wir teilen die vorherige ToDo-Liste in verschiedene Komponenten auf, um sie zu implementieren, damit wir mit Komponenten in Zwei-Wege kommunizieren können. Wir teilen zwei Komponenten auf, nämlich Liste und Form.
Das Formular ist verantwortlich für die Verarbeitung von Benutzereingaben und das Senden einer Nachricht an die übergeordnete Komponente beim Senden des Formulars. Der Code ist wie folgt:
var form = vue.extend ({props: {userername: {type: string, standard: "named"}}, data: function () {return {Eingabe: "",};}, Vorlage: `<h1> {{{username}} 's todo list </h1> <probs: sub: subl. v-model = "input"/> <Eingabe type = "sure" value = '> </form> `, Methoden: {function: function () {this. $ dispatch (" add ", this.input);Die Liste ist nur dafür verantwortlich, die Liste anzuzeigen und Benutzerüberprüfungsvorgänge zu bearbeiten. Nach dem Empfang der Nachricht hinzufügen wird sich selbst einen Eintrag hinzufügen:
var List = Vue.extend({ template: ` <ul> <li v-for='todo in list'> <label v-bind:class="{ done : todo.done }" > <input type="checkbox" v-model="todo.done"/> {{todo.title}} </label> </li> </ul>`, props: { initList: { Typ: Array}}, Daten: function () {return {list: []}}, Ereignisse: {add: function (input) {if (! input) return falsch;Da dies zwei Komponenten sind, ist natürlich eine VUE -Instanz erforderlich, um das Startup zu starten, unsere Instanz lautet wie folgt:
var vm = new vue ({el: "#todo", Komponenten: {"Todo-Form": Form, "Todo-list": list}, Ereignisse: {add: function (input) {this.Beachten Sie, dass Form, Form und Liste tatsächlich logisch parallele Komponenten sind, sodass sie keine Vater-Sohn-Beziehung haben und alle Kinder von VM sind. Hier wird VM nach Empfang der Formularnachricht an die Liste weitergeleitet.
Der HTML -Code ist einfacher:
<div id = "todo"> <todo-form username = 'lily'> </Todo-Form> <Todo-List> </Todo-List> </div>
Slot
Der Steckplatz kann verwendet werden, um HTML aus der übergeordneten Komponente in die untergeordnete Komponente einzufügen. Es ist nicht klar, wann dies benötigt wird, und dies ist für die Kinderkomponente zu invasiv.
Dynamische Schalterkomponenten
Diese Funktion fühlt sich etwas überflüssig an. In vielen Fällen sollten wir den logischen Code und nicht durch dynamische Komponenten integriert. Es ist jedoch sehr bequem, eine Funktion ähnlich wie die Registerkartenschaltung zu implementieren.
Hier fügen wir die TODO -Liste eine Überseite hinzu. Zuerst müssen wir VM in eine Komponente verwandeln, die als Todo bezeichnet wird. Dies ist die gesamte Todo -Seite:
var Todo = Vue.extend({ template: ` <div id="todo"> <todo-form username='Lily'></todo-form> <todo-list></todo-list> <slot>not show</slot> </div> `, components: { "todo-form": Form, "todo-list": List }, events: { add: Funktion (Eingabe) {this.Tatsächlich ist die erste Zeile von Änderungen die erste Zeile.
Dann müssen wir eine über Komponente erstellen:
var über = vue.extend ({Vorlage: `<div id =" über "> <p> Über die Todo -Liste v0.1.0 </p> <p> Inhalt hier </p> </div>`});Als nächstes kommt der Schlüsselpunkt. Wir möchten eine Instanz -VM erstellen, die für das Umschalten dieser beiden Seiten verantwortlich ist:
var vm = new vue ({el: "body", data: {currentView: "todo"}, Komponenten: {"Todo": todo, "About": About}});Hier definieren wir ein CurrentView -Feld, das natürlich einen beliebigen Namen sein kann, und verwenden dann ein spezielles Komponenten -Tag, um die Komponenten zu wechseln:
<component: is = "currentView"> </component> <ul> <li> <label> <Eingabe type = "radio" name = 'page' value = 'todo' v-model = 'currentView'> home </label> </li> <li> <label> <Eingabe type = "radio" name 'page' page = 'vive
Im obigen Code sind zwei Dinge zu beachten:
• Verwenden Sie die Spezial -Tag -Komponente und verwenden Sie die Eigenschaft: IS -Eigenschaft, um Komponenten zu wechseln.
• Radio ändern das Feld CurrentView durch eine Zwei-Wege-Bindung, damit Sie nach dem Klicken wechseln können.
Das Implementierungsprinzip der Datenbindung
VUE ruft bidirektionale Bindungsreaktiv auf, die als reaktionsschnelle Datenbindung übersetzt werden können. Es wird intern durch die von ES5 definierten Getter- und Setter -Methoden implementiert, sodass es nicht unterstützt, IE8 und die folgenden Browser. Es gibt zwei einfache Dinge, um Fehler in dieser Implementierung zu machen:
• Wenn Sie Attribute für Daten direkt hinzufügen und löschen, ist es unmöglich zu erkennen. Im Allgemeinen ist die Löschung nicht möglich, kann jedoch dynamisch hinzugefügt werden. Zu diesem Zeitpunkt sollte es über VM. $ Set ("Name", Wert) hinzugefügt werden.
• Die Änderungen im Objekt können nicht erkannt werden, dh sie können nur Änderungen in der Eigenschaft von Daten erkennen. Wenn Data.a ein Objekt ist, dann kann data.ab = 1 diese Änderung können nicht erkannt werden. In diesem Fall sollten Sie ein neues Objekt erstellen und es Daten zuweisen.A.
Asynchroner Update -Mechanismus
Vue's Update auf DOM ist asynchron! Diese Asynchrone erfolgt in einer asynchronen Warteschlange, aber diese asynchrone Warteschlange wird in der aktuellen Ereignisschleife ausgeführt. Wenn Sie Daten ändern, ist es daher falsch, sofort zum DOM zu gehen, um den Abfragevorgang durchzuführen. Zu diesem Zeitpunkt wurde das DOM noch nicht aktualisiert. Der richtige Weg ist, dies zu tun:
vm.msg = 'Neue Nachricht' // Datavm ändern.
Oder das:
vm. $ nextTick (function () {this. $ el.textContent === 'Neue Nachricht' // true})Es dauerte lange, um die Komponenten zu lesen. Hier ist ein weiterer Punkt: Richtlinie
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.