Was sind Komponenten?
Komponente ist eines der leistungsstärksten Merkmale von Vue.js. Komponenten können HTML -Elemente erweitern und wiederverwendbaren Code einkapseln. Auf einer höheren Ebene sind Komponenten benutzerdefinierte Elemente, und Vue.js 'Compiler fügt ihm besondere Funktionen hinzu. In einigen Fällen können Komponenten auch in Form von nativen HTML -Elementen erfolgen, die mit der IS -Funktion erweitert werden.
Als nächstes werde ich Ihnen das Grundwissen von VueJs One-Way-Bindung, Zwei-Wege-Bindung, Listenwiedergabe und Antwortfunktionen vorstellen. Die spezifischen Details sind wie folgt:
(I) Einwegbindung
<div id = "app"> {{message}} </div> <script> neuer VUE ({el: '#app', Daten: {message: 'Hallo vue.js!'}}) </script>①e sollte Bindung, Bindungs -ID = App -Tag bedeuten
Es kann auch in Folgendes geändert werden:
<div> {{message}} </div>EL: '.App',
Genauso effektiv.
Aber wenn es mehrere gibt, funktioniert es nur für den ersten:
<div> {{message}} </div> <div> {{message}} </div> Hallo vue.js! {{message}}②Die Nachrichtenvariable in Daten repräsentiert den Wert von {{message}
(2) Zwei-Wege-Bindung
<div id = "app"> {{message}} <br/> <input v-model = "message"/> </div> <script> Neue VUE ({El: '#App', Data: {message: 'Hallo vue.js!'}}) </script>Der Effekt ist:
① Der Anfangswert befindet sich im Eingabe -Eingangsfeld, und der Wert ist der Wert des Nachrichtenattributs in Daten.
② Das Ändern des Wertes des Eingangsfelds kann den externen Wert beeinflussen.
(Iii) Funktionsertragswert
<div id = "app"> {{message ()}} <br/> <input v-model = "message ()"/> </div> <script> new Vue ({el: '#app', data: {message: function () {return 'hello vue.js!';}}}}) </script>Wirkung:
① Der Ausgabewert ist auch der Rückgabewert der Nachricht;
② Nachteile: Zwei-Wege-Bindung verlieren!
(Iv) Rendering -Liste
<div id = "app"> <ul> <li v-für = "list in todos"> {{list.text}} </li> </ul> </div> <script> neuer VUE ({el: '#App', Data: {todos: [{text: "1st" {{text: "2nd" {text "{text" {text "{text" {text "{text" {text "{text" {text "{text" {text "{text" {text "{text" {text "{text" {text "{xtDie Liste in V-für ähnelt dem I in in in in in in
Persönlich,
① List in Todos kann als für die Liste in Todos verstanden werden
② Verstehe dann die Liste. Text der nächsten Zeile wie Todos [Liste] .Text
Wo ist dieses V-für-Tag, es wird mehrmals darin kopiert.
(V) Verarbeitung Benutzereingabe
<div id="app"> <input v-model="message"> <input type="button" value="value +1" v-on:click="add"/> <input type="button" value="value-1" v-on:click="minus"/> <input type="button" value="reset"/> v-on:click="reset"/> </div> <script> new Vue({ el: '#app', data: { Nachricht:}, Methoden: {function () {this.message ++;Wirkung:
① Klicken Sie für den Wert des Eingangsfelds einmal auf die Schaltfläche Hinzufügen und der Wert beträgt +1.
② Wenn es nicht hinzugefügt werden kann, wird das Ergebnis zurückgegeben, als ob der normale Ausdruck falsch hinzugefügt wird, z. B. NAN.
③ Der Wert der Nachricht in Daten ist der Anfangswert.
④Die Methoden sind Sammlungen von Funktionen, die durch Kommas getrennt sind;
⑤ Wenn Sie den Wert erhalten, fügen Sie dies beispielsweise hinzu. Message erhält den Wert der Nachricht.
(Vi) Multifunktional
<div id = "app"> <input v-model = "val" v-on: keypress.enter = "addtolist"> <ul> <li v-for = "val in Werten"> {{val.val}}} <Eingabe type type = "button" value = "v-on" v-on: click = "removelist ($ Index). Daten: {val: "1", Werte: []}, Methoden: {addtolist: function () {var val = parseInt (this.val.trim ()); 1);Wirkung:
① Der Wert im anfänglichen Eingangsfeld beträgt 1;
② Drücken Sie die Eingabetaste in das Eingabefeld, um den Inhalt des Eingangsfelds in eine Nummer zu konvertieren und zu einer Liste hinzuzufügen. Die konvertierte Nummer und eine Schaltfläche Löscher in der Liste und der Wert im Eingabefeld werden in die in eine Zahl konvertierte und hinzugefügte Werte geändert.
Wie im Bild gezeigt:
③ Sein Zugabe verwendet eine bidirektionale Bindung, drückt den Eingangswert auf das Array von Werten in Daten und verwendet dann den Effekt der Rendering-Liste, um mehrere Wertezeilen auszugeben.
④ In dem Schaltflächen -Tag erhält der Parametername der Funktion einen Parameter, der Index der Zeile ist, und der Parametername ist $ index
⑤ Im Tag kann der Funktionsname der ausgelösten Funktion mit Klammern oder ohne Klammern hinzugefügt werden. Die tatsächliche Messung scheint keine Wirkung zu haben.
(7) Tags und API -Zusammenfassung (1)
① {{variabler Name}}
Repräsentiert die gebundene Variable. Der variable Name ist beim Aufrufen erforderlich
② v-model = "Variable"
Verwenden Sie eine Zwei-Wege-Bindung. Wenn der Eingabe kein Typ hinzugefügt wird, ist es Text. Wenn der Typ hinzugefügt wird, handelt es sich beispielsweise um Typ:
<Eingabe v-Model = "Datum" type = "Date"/> <li> {{Date}} </li>Der Wert des Datumsart -Eingangsfelds wird mit dem vom Li -Tag angezeigten Inhalt zusammengefasst.
③ V-on: klick = "Funktionsname"
Diese Funktion wird beim Klicken ausgelöst, entweder kann () hinzugefügt werden oder nicht. $ index wird als Parameter verwendet, um den Index darzustellen, und der Indexwert startet ab 0.
④ V-für
Nachdem der Array-Inhalt aktualisiert wurde, wird die Zwei-Wege-Grenze in Echtzeit aktualisiert, ebenso wie das V-Model.
Ähnlich wie bei der in der Aussage wird es viele Male verwendet
⑤ V-on: Ereignis
Das heißt, das ausgelöste Ereignis, es gibt Klicken (klicken), TastePress (klicken).
Ereignissen können von spezifischeren Dingen wie KeyPress.einter verfolgt werden.
Mehr muss sehen
⑥ neuer Vue
Übergeben Sie durch eine neue Instanz von VUE ein Objekt als Parameter an diese Instanz.
In:
El bedeutet die gebundene Vorlage (sie stimmt nur mit der ersten Grenze überein)
Daten stellen Daten dar, die direkt verwendet werden können, beispielsweise in V-Model oder {{{variabler Name}}
Methoden
⑦ Rufen Sie Variablen innerhalb der Funktion auf
Danach. Variabler Name zum Beispiel:
Daten: {val: "1", Werte: []}, Methoden: {addtolist: function () {console.log (this.val);Dies.Val hier ist die Daten.Val oben, die auch die {{val}} in HTML ist und auch V-Model = "Val" ist, aber es ist nicht
<li v-for = "val in Werten"> {{val.val}} <Eingabe type = "button" value = "delete" v-on: klick = "removelist ($ index)"/> </li>Aus diesem Grund denke ich persönlich, dass das Val hier im Rahmen von V-für liegt, sodass der Val in Val in Werte eine höhere Priorität in der Bereichskette hat.
Das obige ist eine detaillierte Erklärung des ersten Einführungs-Tutorials von VueJs, das Ihnen vom Editor vorgestellt wurde (Einwegbindung, Zwei-Wege-Bindung, Listenwiedergabe, Antwortfunktion). Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!