Was ist eine Komponente: Komponenten sind eine 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.
Wie registriere ich Komponenten?
Sie müssen eine Komponente mithilfe der Vue.Ettend -Methode erstellen und dann die Komponente mit der Vue.comPonent -Methode registrieren. Das Format der Vue.extend -Methode lautet wie folgt:
var mycomponent = vue.extend ({// Optionen ... Ich werde es später vorstellen})Wenn Sie diese erstellte Komponente an anderer Stelle verwenden möchten, müssen Sie sie benennen:
Vue.comPonent ('My-Component', MyComponent)
Nach der Benennung können Sie diesen Komponentennamen im HTML -Tag verwenden, genau wie die Verwendung eines DOM -Elements. Schauen wir uns ein vollständiges Beispiel für die Registrierung und Verwendung von Komponenten an.
HTML -Code:
<div id = "Beispiel"> <my-component> </my-component> </div>
JS -Code:
// Definieren Sie var mycomponent = vue.extend ({Vorlage: '<Div> Eine benutzerdefinierte Komponente!Ausgangsergebnis:
<div id = "Beispiel"> <div> Eine benutzerdefinierte Komponente! </div> </div
Verschachtelte Komponenten
Die Komponente selbst kann auch Komponenten enthalten. Die folgende übergeordnete Komponente enthält eine Komponente mit dem Namen Child-Component, diese Komponente kann jedoch nur von übergeordneten Komponenten verwendet werden:
var child = vue.extend ({Vorlage: '<div> Eine benutzerdefinierte Komponente! </div>'}); var parent = vue.extend ({Vorlage: '<Div> übergeordnete Komponente: <Child-Component> </child-component> </div>', Komponenten: {child-component ': child}}});Der obige Definitionsprozess ist ziemlich umständlich, und Sie müssen nicht jedes Mal die Methoden von Vue.comPonent und Vue.extend -Methoden aufrufen:
// Erweitern und registrieren Sie Vue.comPonent ('my-component', {Vorlage: '<Div> Eine benutzerdefinierte Komponente!Dynamische Komponenten
Mehrere Komponenten können denselben Mountspunkt verwenden und dann dynamisch zwischen ihnen wechseln. Verwenden Sie das reservierte <komponenten> Element, um dynamisch an seine IS -Eigenschaft zu binden. Die folgenden Spalten haben drei Komponenten zu Hause, Beiträge und Archiv, die unter derselben VUE -Instanz installiert sind, und die Komponentenanzeige dynamisch über die Funktion "CurrentView" wechseln.
HTML -Code:
<div id = "dynamic"> <button id = "home"> home </button> <button id = "posts"> posts </button> <button id = "archiv"> archiv </button> <br> <component: is = "currentView"> </component> </div>
JS -Code:
var vue = new vue ({el: "#dynamic", data: {currentView: "home"}, Komponenten: {home: {template: "home"}, posts: {template: "posts"}, archiv: {template: "archive"}}); "home";}; document.getElementById ("posts"). onclick = function () {vue.currentView = "posts";}; document.getElementById ("archiv"). onclick = function () {vue.currentView = "archiv";};Komponenten und V-für
<my-component v-for = "item in items"> </my-component>
Daten können nicht an eine Komponente übergeben werden, da der Umfang der Komponente unabhängig ist. Um Daten an Komponenten weiterzugeben, sollten Requisiten verwendet werden:
<My-Component
v-for = "Artikel in Elementen"
: item = "item"
: index = "$ index">
</my-component>
Der Grund, warum das Element nicht automatisch in die Komponente injiziert wird, ist, dass dies dazu führt, dass die Komponente fest an den aktuellen V-für gekoppelt ist. Erklären Sie ausdrücklich, woher die Daten stammen, und können an anderer Stelle für Komponenten wiederverwendet werden.
Eingehender Reaktionsprinzip
Wenn eine Komponente Daten bindet, wie kann die Bindung effektiv sein und kann dynamisch Attribute ändern und hinzufügen? Schauen Sie sich die folgenden Prinzipien ein.
Verfolgung von Änderungen: Übergeben Sie ein anderes Objekt an die VUE -Instanz als Option für Daten, Vue.js durchquert seine Eigenschaften und konvertieren sie mit Object.DefineProperty in Getter/Setter. Dies ist eine ES5 -Funktion, und alle Vue.js unterstützen IE8 oder niedriger nicht.
Jede Anweisung/Datenbindung in der Vorlage hat ein entsprechendes Beobachterobjekt, das die Attribute als Abhängigkeiten während des Berechnungsprozesses aufgezeichnet hat. Wenn der abhängige Setter aufgerufen wird, wird die Neuberechnung der Beobachter ausgelöst. Der Prozess ist wie folgt:
Erkennungsproblem ändern: Vue.js kann die Addition oder Entfernung von Objekteigenschaften nicht erkennen. Die Eigenschaften müssen auf Daten stehen, damit Vue.js es in den Getter/Setter -Modus umwandeln kann, um reaktionsschnell zu sein. Zum Beispiel:
var data = {a: 1}; var vm = new vue ({data: data}); // `vm.a` und` Data.a` sind jetzt reaktionsschnell vm.b = 2 // `vm.b` ist nicht reaktionsschnell data.b = 2 //` Data.b` ist nicht reaktionsfähigEs gibt jedoch Möglichkeiten, Attribute nach der Instanzerstellung hinzuzufügen und sie entsprechend zu gestalten. Sie können die Instanzmethode SET (Schlüssel, Wert) verwenden:
VM. set ('b', 2)
// `vm.b` und` Data.b` reagieren jetzt
Für normale Objekte können Sie globale Methoden verwenden: Vue.set (Objekt, Schlüssel, Wert):
Vue.set (Daten, 'C', 3)
// `vm.c` und` Data.c` reagieren jetzt an
Daten initialisieren: Obwohl Vue.js dynamische Zugabe entsprechender Eigenschaften liefert, wird empfohlen, alle entsprechenden Eigenschaften für das Datenobjekt zu deklarieren.
Tu das nicht:
var vm = new vue ({template: '<div> {{msg}} </div>'}) // Dann fügen Sie `Msg`vm. $ set ('msg', 'Hallo!'Dies sollte getan werden:
var vm = new vue ({data: {// deklarieren `msg` msg: ''}, template: '<div> {{msg}} </div>'}) // dann setze` msg`vm.msg = 'Hallo!Komponente vollständiger Fall
Die nachstehend eingeführten Beispiele implementieren die Modal -Fensterfunktion und der Code ist relativ einfach.
HTML -Code:
<!-Skript implementieren, um eine Vorlage zu definieren. Header </Slot> </div> <div> <!-Slot entspricht dem Körperplatzinhaber-> <Slot Name = "Body"> Standardkörper </Slot> </div> <div> <!-Slot ist äquivalent zu Footer-Platzhalter-> <Slot-Name = "Footer"> Default Footer </SOT> butth @button @butth @butth @butth @butth @butth @butth @butth @: </div> </div> </div> </div> </div> </div> </div> </div> </script> <div id = "app"> <!-Das VUE-Instanzattribut beim Klicken auf die Schaltfläche festlegen. Der Wert von ShowModal ist true-> <button id = "show-Modal" @click = "showModal = true"> modal </button> <!-Modal ist ein benutzerdefiniertes Plug-In. Die Funktion des Plug-Ins zeigt die Showmodal-Funktion der VUE-Instanz-> <modal: show.sync = "showModal"> <!
JS -Code:
//Define a plug-in with the name modalVue.component("modal", { //The template of the plug-in is bound to the content of the DOM element with the id of modal-template template: "#modal-template", props: { //The type is boolean show:{ type: Boolean, required: true, twoWay: true } }}); // Sofortierung von VUE, der Umfang befindet sich unter der ID des App -Elements, neuer VUE ({el: "#App", Daten: {// Der Standardwert ist falsch ShowModal: false}});CSS -Code:
.modal-mask {Position: behoben; Z-Index: 9998; Top: 0; links: 0; Breite: 100%; Höhe: 100%; Hintergrundfarbe: RGBA (0, 0, 0, .5); Anzeige: Tabelle; Übergang: Opazität .3s Leichtigkeit;}. Modal-Wrapper {Anzeige: Tabellenzell; Vertikal-Align: Middle;}. Modal-Container {Breite: 300px; Rand: 0px Auto; Polsterung: 20px 30px; Hintergrundfarbe: #fff; Border-Radius: 2PX; Box-Shadow: 0 2px 8px RGBA (0, 0, 0, .33); Übergang: Alle .3s Leichtigkeit; Schriftfamilie: Helvetica, Arial, sans-serif;}. Modal-Header H3 {Margin-Top: 0; Farbe: #42b983;}. Modal-Body {Margin: 20px 0;}. Modal-Default-Button {float: rechts;}/** Die folgenden Stile werden automatisch auf Elemente angewendet, wobei* v-transition = "modal" Wenn ihre Sichtbarkeit* durch VUE.JS. Styles.*/. Modal-Enter, .modal-Leave {Opazität: 0;}. Modal-Enter .modal-Container, .modal-Leave .modal-Container {-webkit-transform: Skala (1.1); Transformation: Skala (1.1);}Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Für Tutorials zu Vue.js -Komponenten klicken Sie bitte auf das spezielle Thema VUE.JS -Komponenten -Lern -Tutorial zum Erlernen.
Da ich die Funktionen der Komponenten im Projekt nicht genügend verwendet habe, habe ich kein tiefes Verständnis der Komponenten, und die Einführung ist relativ oberflächlich. Vielen Dank für Ihre Lektüre.