Dieser Artikel bezieht sich auf die offiziellen Dokumente, um einen detaillierteren Code zu erstellen, und ist ein sichereres Tutorial für Anfänger zum Lesen und Lernen.
Dieser Artikel stammt aus dem offiziellen Dokument:
http://cn.vuejs.org/guide/components.html
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.
Komponentendefinition
① Funktion von Komponenten:
【1】 Erweitern Sie HTML -Elemente und umfassen wiederverwendbarer Code;
【2】 Komponenten sind benutzerdefinierte Elemente, und der Compiler von VueJS kann ihnen spezielle Funktionen hinzufügen.
【3】 In einigen Fällen können Komponenten in Form von nativen HTML-Elementen erfolgen, die sich auf isähnliche Weise erstrecken.
② Schreiben Sie eine Standardkomponente:
Es ist in die folgenden Schritte unterteilt:
[1] Der Ort, an dem die Komponente montiert ist, muss das von der VUE -Instanz gerendende HTML -Element sein. Insbesondere das HTML -Element wie <div id = ”app”> </div> oben und seine untergeordneten Knoten;
【2】 Definieren Sie eine Komponente, verwenden Sie
VARIVE Variable Name = vue.extend ({Vorlage: "Hier ist der Vorlageninhalt von html"}) wird in der Form von "var btn = vue.extend ({Vorlage:" <taste> Dies ist eine Taste </button> "}) erstellt.【3】 Registrieren Sie die definierte Komponente in der VUE -Instanz, mit der das angegebene Tag durch den Inhalt der Komponente ersetzt werden kann.
Als Code:
// registrieren Sie ihn an Vue.comPonent ("Add-Button", BTN);Insbesondere jede der folgenden Tags (im Rahmen der Wurzelinstanz von VUE)
<add-button> </add-button>
Wird sein
<taste> Dies ist eine Schaltfläche </button>
Ersetzt.
[4] Die oben genannte Methode ist die globale Registrierung (das Add-Button-Tag jeder VUE-Instanz wird durch das ersetzt, was wir definieren);
Die Lösung ist die lokale Registrierung.
Zum Beispiel Code: (Dies ist das Vorlagenattribut wird festgelegt. Sie können auch das Tag <add-button> </add-button> in das <div id = "app"> </div> tag platzieren, wenn dieses Attribut nicht verfügbar ist.
<div id = "app"> </div> <skript> // Definieren Sie eine Komponente var btn = vue.extend ({Vorlage: "<buttes> Dies ist eine Schaltfläche </button>"}) vue.comPonent ("add-button", btn); // Erstellen Sie eine Root-Instanz, dh Vue wirken Sie sich auf dieses Root var vm = new Vue ({El: '#App', Vorlage: "<add-button> </add-button>"}); </script>③ Lokale Registrierungskomponenten:
Einfach ausgedrückt, wirkt sich nur auf diese Vue -Instanz aus. Die spezifische Methode besteht darin, den Registrierungsschritt zu überspringen.
Wenn dann die VUE -Instanz deklariert wird, wird sie der Komponenteneigenschaft hinzugefügt (es handelt sich um ein Objekt, das in KV -Form platziert ist) (Beachten Sie, dass dieses Wort noch ein S enthält).
Als Code:
<div id="app"> </div> <script> //Define a component var btn = Vue.extend({ template: "<button>This is a button</button>" }) //Create a root instance, that is, let Vue take effect on this root var vm = new Vue({ el: '#app', template: "<add-button></add-button>", components: { "Add-Button": btn}}); </script>Notiz:
Nach dem offiziellen Tutorial gilt diese Methode (unter Bezugnahme auf die lokale Registrierung) auch für andere Ressourcen wie Richtlinien, Filter und Übergänge.
④Implify Schritte:
【1】 Definieren von Komponenten und Registrierungskomponenten werden in einem Schritt abgeschlossen:
// Definieren Sie eine Komponente vue.comPonent ("add-button", {Vorlage: "<tasten> Dies ist eine Schaltfläche </button>"});【2】 Während der lokalen Registrierung wird der Definitions- und Registrierungsschritt abgeschlossen:
// Erstellen Sie eine Root-Instanz, dh VUE Effekte auf dieses Root var vm = new VUE ({El: '#app', Vorlage: "<add-button> </add-button>", Komponenten: {"add-button": {template: "<button> Dies ist eine Taste </button>"}});⑤Data -Attribute
Es ist nicht möglich, der Komponente Datenattribute direkt hinzuzufügen (ungültig).
Der Grund dafür ist, dass in diesem Fall das Datenattribut der Komponente ein Objekt sein kann und dieses Objekt auch extern übergeben werden kann (z. B. zuerst ein Objekt deklarieren, und dann ist das Objekt der Wert der Daten), was dazu führen kann, dass alle Kopien der Komponente ein Objekt freigeben (das extern übergeben), was offensichtlich falsch ist.
Daher sollte das Datenattribut eine Funktion sein, und dann gibt es einen Rückgabewert, der den Wert des Datenattributs ist.
Und dieser Rückgabewert sollte ein brandneues Objekt sein (dh eine tiefe Kopie, wobei mehrere Komponenten ein Objekt teilen).
Als Code:
var vm = new vue ({el: '#app', template: "<add-button> </add-button>", Komponenten: {"add-button": {template: "<button> Dies ist ein Knopf {{{btn}}Wenn dies der Fall ist, ist der Wert von BTN derselbe (weil sie tatsächlich ein Objekt teilen)
<div id = "app"> </div> <div id = "app2"> </div> <script> var obj = {btn: "123"}; var vm = new vue ({el: '#app', template: "<add-button> </add-button>", Komponenten: {"add-button": {template: "<button> Dies ist eine Taste {{{btn}}}}}}}}}}); obj.btn = "456"; var vm2 = new vue ({el: '#app2', template: "<add-button> </add-button>", Komponenten: {"add-button": {template: "<button> Dies ist ein Taste {{{btn}}}}}}); </script>Notiz:
Wenn das EL -Attribut in vue.extend () verwendet wird, muss es auch eine Funktion sein.
⑥ is Funktionen:
[1] Nach dem offiziellen Tutorial haben einige HTML -Elemente Beschränkungen, welche Elemente darin platziert werden können;
Aber in der Tat habe ich kein Problem mit meinem eigenen Test gefunden, also verstehe ich nicht.
【2】 Gib mir eine URL, wenn etwas wirklich passiert, werde ich sie zurück lernen.
http://cn.vuejs.org/guide/components.html#u6a21_u677f_u89e3_u6790
Das obige ist eine Beispielanalyse der Definition der VueJS -Komponente im 8. Kapitel von VueJs, die Ihnen vorgestellt wurden. 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!