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.
Dieser Artikel ist eine detailliertere Erklärung, die vom Herausgeber basierend auf den offiziellen Dokumenten erstellt wurde. Der Code ist vollständiger und perfekter, was für Anfänger sehr geeignet ist.
Offizielle Dokumentation:
http://cn.vuejs.org/guide/components.html#u52a8_u6001_U7ec4_u4ef6
Komponenten - Verschiedene Elemente werden wie folgt beschrieben:
① Komponenten und V-für
Einfach ausgedrückt werden die Komponenten mehrmals wiederverwendet.
Beispielsweise kann eine bestimmte Zeile in der Tabelle oder das E-Commerce-Produktfenster (einster Fenster) zu Komponenten werden, die wiederverwendet werden können.
Schreiben Sie einfach einen von ihnen als Komponente und machen Sie die Datenquelle zu einem Array (oder Objekt, aber ich persönlich denke, es ist ein Array). Durch V-for-Traversal kann jede Instanz der Komponente einen der Array erhalten, wodurch alle Komponenten erzeugt werden.
Aufgrund von Multiplexen müssen Requisiten verwendet werden, um das Traversal -Ergebnis I und die an Requisiten gebundenen Daten zu binden. Die Bindungsmethode entspricht der gewöhnlichen Form und ist in der Vorlage gebunden.
Beispielcode:
<div id = "app"> <button @click = "toktchildren"> klicken, um die untergeordnete Komponent zugelassen zu lassen. <Script> var vm = new vue ({el: '#app', Daten: {items: [1, 2, 3, 4]}, Methoden: {toknowchildren: function () {// STACK -Komponent -Anzeige console.log (this. $ childhes); "<td> {{index}} </td>" + "<td> {{id}} </td>" + "<td> Dies ist die untergeordnete Komponente </td>" + "</tr>", Props: ['ID', 'Index']}}}); </script>veranschaulichen:
【1】 Denken Sie daran, die Daten in Requisiten zu übergeben!
【2】 Bind Index und Index $ $ index, da der Index bei 0 beginnt, sodass die Spalte, in der sich der Index befindet, bei 0 beginnt. ID ist an mich gebunden, der Elemente durchquert, sodass ID bei 1 beginnt.
[3] Sie können Kinderkomponenten dadurch erhalten.
② Schreiben Sie wiederverwendbare Komponenten:
Einfach ausgedrückt ist es möglich, dass eine Einzelnutzungskomponente (nur hier verwendet, nicht wiederverwendet) eng mit anderen Komponenten gekoppelt ist, aber eine wiederverwendbare Komponente sollte eine klare öffentliche Schnittstelle definieren. (Ansonsten wie benutzen andere es?)
Wiederverwendbare Komponenten müssen im Grunde genommen mit der Außenseite interagieren, und eine Komponente und die extern offengelegte interaktive Schnittstelle umfassen:
【1】 Requisiten: Ermöglichen Sie, dass externe Umgebungsdaten an Komponenten übergeben werden;
【2】 Ereignis: Ermöglichen Sie der Komponente, die Wirkung der externen Umgebung auszulösen, dh durch Hinzufügen einer V-On-Anweisung am Mountspunkt werden die Methoden der übergeordneten Komponenten gleichzeitig ausgelöst, wenn die Ereignisse der untergeordneten Komponente ausgelöst werden.
[3] Slot: Verteilung, so dass der Inhalt der übergeordneten Komponente in die Ansichtsstruktur der untergeordneten Komponente eingefügt werden kann.
Als Code:
<div id = "app"> <p> Dies ist die erste übergeordnete Komponente </p> <widget: the-value = "test" @einige = "todo"> <span> 【Der Inhalt der ersten übergeordneten Komponente, die】 </span> </widget> </div> </div> </widget @einige = "> </</p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> < <Script> vue.comPonent ("widget", {template: "<button @click = 'doSomething'> <Slot> </slot> Dies ist eine wiederverwendete Komponente, klicken Sie auf {{theValue}} </button>", Methoden: {Doomting: Funktion () {{$ emit ("einige"; console.log ("widget click"); var vm_other = new vue ({el: '#app2', Daten: {name: "First"}, Methoden: {Todo: function () {console.log ("Dies ist eine andere übergeordnete Komponente")}}}); </script>veranschaulichen:
[1] Verteilungsschlitz wird in der ersten übergeordneten Komponente verwendet, und Requisiten werden verwendet, um den Wert zu bestehen (den Wert des Tests an den Wert der untergeordneten Komponente bestehen);
[2] Unter den beiden Komponenten wird nach dem Klicken auf die untergeordnete Komponente die Dosenmethode in Methoden und dann das Ereignis in Ereignissen ausgeführt. Dann durch den Mountspunkt @einige = "Todo", um das Ereignis der untergeordneten Komponente und die Todo -Methode der übergeordneten Komponente zusammen zu binden.
Nach dem Klicken auf die untergeordnete Komponente wird die Todo -Methode der übergeordneten Komponente schließlich ausgeführt.
[3] Ändern des an die untergeordneten Komponente übergebenen Werts in der übergeordneten Komponente ändert synchron den Wert der untergeordneten Komponente (dh beide sind datengebunden).
③Async -Komponenten:
Nach meinem Verständnis, einfach ausgedrückt, hat eine große Anwendung mehrere Komponenten, aber einige Komponenten müssen nicht sofort geladen werden, sodass sie in mehrere Komponenten aufgeteilt werden (z. B. diejenigen, die sofort geladen werden müssen, jedoch nicht sofort).
Wenn es sofort geladen werden muss, ist es offensichtlich besser, es in dieselbe Datei zu stecken (oder in derselben Stapel zusammen angefordert).
Wenn es nicht sofort geladen werden muss, kann es in andere Dateien platziert werden. Bei Bedarf wird AJAX es jedoch auf den Server fordern.
Die folgenden Anfragen sind asynchrone Komponenten;
Die Funktion von Vue.js ist die Funktion von Vue.js, mit der die Komponente als Fabrikfunktion definiert und die Definition der Komponente dynamisch analysiert wird.
Kann mit webpack verwendet werden.
Wie ich es im Detail benutzt, verstehe ich es nicht ganz. Ich kann es nicht klar im Tutorial schreiben, also werde ich es beiseite legen und darauf warten, dass es bei Bedarf studiert.
Link:
http://cn.vuejs.org/guide/components.html#u5f02_u6b65_u7ec4_u4ef6
④Resource -Namenskonventionen:
Einfach ausgedrückt, HTML-Tags (wie Div und DIV sind gleich) und Merkmale (z. B. das Schreiben von Anweisungen wie V-on anstelle von von) sind von Fall unempfindlich.
Ressourcennamen werden oft in Kamelähnlichkeit (wie Kamelcase-Kamel-ähnlich) oder in Form von Großbuchstaben des ersten Buchstabens des Wortes geschrieben (wie Pascalcase, ich weiß nicht, wie ich das nennen soll, aber ich schreibe dies selten).
Vue.comPonent ("MyTemplate", {// ...... weggelassen})Vue.js kann dies automatisch erkennen und konvertieren.
<My-template> </my-template>
Die obige Vorlage kann dieses Tag automatisch ersetzen.
⑤Recursive Komponenten:
Einfach ausgedrückt ist eine rekursive Komponente eine Komponente, die eine eigene Vorlage für sich einbettet.
Wenn eine Komponente wiederholen möchte, benötigt sie das Namensattribut, und Vue.comPonent wird mit einem eigenen Namensattribut geliefert.
Wahrscheinlich sieht das so aus,
<div id = "App"> <my-template> </my-template> </div> <skript> vue.comPonent ("myTemplate", {Vorlage: "<p> <My-template> </my-template> </p>"})Dies ist unendliche Rekursion, was definitiv nicht möglich ist. Daher ist es notwendig, die Anzahl der Schichten seiner Rekursion zu steuern, beispielsweise die Reursion durch Daten zu steuern und die Rekursion zu stoppen, wenn die Daten leer sind.
Der Beispielcode lautet wie folgt:
<ul id = "app"> <li> {{b}} </li> <my-template v-if = "a": a = "aa": b = "ab"> </my-template> </ul> <script> <script> :a="aa" :b="ab"></my-template></ul>', props: ["a", "b"] }) var data = { a: { a: { a: { a: 0, b: 3 }, b: 2 }, b: 1 } var vm = new Vue({ el: '#app', data: data, methods: { todo: function () { this.test += "!"; </script>veranschaulichen:
[1] Bei der Abgabe werden der Wert von A und der Wert von B durch Requisiten weitergegeben, wobei der Wert von a als Datenquelle für die Werte von A und B der Komponente nach der Rekursivität verwendet wird;
Bestimmen Sie dann, ob der Wert eines an die rekursiven Komponente übergebene Wert vorhanden ist, und wenn ja, wiederholt sich weiter.
Wenn der Wert von A nicht existiert, wird die Rekursion gestoppt.
⑥Fagment Beispiel:
Einfach ausgedrückt, die sogenannte Fragmentinstanz bedeutet, dass die Vorlage der Komponente nicht unter einem Wurzelknoten steht:
Fragmentinstanzcode:
Vue.comPonent ("MyTemplate", {Vorlage: '<div> 1 </div>' + '<div> 2 </div>',})Nichtfragmentinstanz:
Vue.comPonent ("MyTemplate", {Vorlage: '<div>' + '<div> 1 </div>' + '<div> 2 </div>' + '</div>',})Die folgenden Eigenschaften von Fragmentinstanzen werden ignoriert:
[1] Nicht-Prozess-Steuerungsanweisungen zu Komponentenelementen (z. B. V-Show-Anweisungen, die am Mountspunkt geschrieben und von der übergeordneten Komponente gesteuert werden. Beachten Sie jedoch, dass V-IF den Anweisungen zur Prozesssteuerung gehört);
【2】 Nicht-Props-Funktion (Beachten Sie, dass Requisiten nicht ignoriert werden, zusätzlich Requisiten auf dem Mountspunkt);
[3] Übergang (dh das Übergangsattribut wird ignoriert);
Weitere Hinweise auf die offizielle Dokumentation:
http://cn.vuejs.org/guide/components.html#u7247_u65ad_u5b9e_u4f8b
⑦Inline -Vorlage
Referenz: http://cn.vuejs.org/guide/components.html#u5185_U8054_U6A21_U677f
Das obige ist die Komponente von Vuejs Kapitel 13, die der Editor Ihnen vorgestellt hat - verschiedene Elemente. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!