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
Die dynamischen Komponenten werden nachstehend beschrieben:
①Simple:
Dies bedeutet, dass mehrere Komponenten unter einem Mountspunkt platziert werden, und dann entscheiden sie, welche anhand einer Variablen der übergeordneten Komponente angezeigt werden soll, oder keine davon werden angezeigt.
② Dynamischer Switch:
Verwenden Sie das Komponenten-Tag am Mountspunkt und verwenden Sie dann V-BIND: IS = "Komponentenname", um den Namen der übereinstimmenden Komponenten automatisch zu finden. Wenn nicht, wird es nicht angezeigt;
Um die montierte Komponente zu ändern, müssen Sie nur den Wert der IS -Richtlinie ändern.
Wie im Beispielcode:
<div id = "app"> <button @klick = "toShow"> klicken, um die untergeordnete Komponent-Anzeige </button> <Komponenten v-Bind: is = "wot_to_show"> </component> </div> <script> var vm = new Vue ({el: '#App' ["First", "Second", "dritte", "]; 1 </div> "}, Sekunde: {// Die zweite untergeordnete Komponentenvorlage:" <Div> Hier ist die untergeordnete Komponente 2 </div> "}, dritte: {// Die dritte Child -Komponenten -Vorlage:" <div> Hier ist untergeordnete Komponente 3 </div> "},}}); </script>veranschaulichen:
Durch Klicken auf die Schaltfläche der übergeordneten Komponente wechselt automatisch, um eine untergeordnete Komponente anzuzeigen (ermittelt basierend auf dem Wert der Variablen, die_to_show).
③ Keep-Alive
Einfach ausgedrückt wird die Komponente, die ausgeschaltet wurde (derzeit nicht angezeigt), direkt entfernt.
Wenn Sie sich dies ansehen.
Wenn die untergeordnete Komponente umgeschaltet werden muss, ist es noch erforderlich, um sie im Speicher zu halten, um das Wiederholungsrendern zu vermeiden, wenn es beim nächsten Mal angezeigt wird. Dann sollten Sie das Komponenten-Tag das Keep-Alive-Attribut hinzufügen.
Als Code:
<div id = "app"> <button @click = "toShow"> klicken, um die untergeordnete Komponent-Anzeige </button> <Komponenten v-Bind: is = "What_to_show" Keep-Alive> </component> </div> <script> var vue ({El: '#App', Data: {/to-to_to_to_to_to_to_to_to_to_) zulassen zu lassen. var = ["First", "Second", "Dritter", "] var index = arr.indexof (this.which_to_show); Komponentenvorlage: "<div> Hier ist untergeordnetes Komponenten 1 </div>"}, Sekunde: {// Die zweite untergeordnete Komponentenvorlage: "<Div> Hier ist untergeordnetes Komponenten 2 </div>"}, dritte: {// Die dritte untergeordnete Komponentenvorlage: "<Div> hier ist untergeordnetes Komponent 3 </div.},}}); </script>veranschaulichen:
Im Anfangsfall gibt es im VM. $ Children -Attribut nur ein Element (erste Komponente). Nach dem Klicken auf die Schaltfläche zum Wechseln befinden sich zwei Elemente im VM. $ Children -Attribut. Nach dem erneuten Wechsel gibt es drei Elemente (die drei Unterkomponenten werden alle im Speicher erhalten).
Danach wird es drei Elemente geben, egal wie Sie wechseln.
④ Haken aktivieren
Einfach ausgedrückt, es ist faul Laden.
Wenn wir beispielsweise eine AJAX -Anfrage initiieren, müssen wir einige Zeit warten. Wenn wir die AJAX -Anfrage nach Abschluss des Jahres laden müssen, müssen wir den Activate -Haken verwenden.
In Bezug auf die spezifische Verwendung ist Aktivierung ein Attribut auf derselben Ebene wie die Attribute wie Vorlage und Daten. Die Form ist eine Funktion. In der Funktion gibt es standardmäßig einen Parameter. Dieser Parameter ist eine Funktion. Die Komponente wird nur dann umgeschaltet, wenn diese Funktion ausgeführt wird.
Um das Laden der Verzögerung nachzuweisen, habe ich auf der Serverseite festgelegt, dass eine bestimmte AJAX -Anforderung 2 Sekunden verzögert, bevor der Inhalt zurückgegeben wird. Wenn Sie also zum ersten Mal die Komponente 2 wechseln, müssen Sie also 2 Sekunden warten, bevor Sie erfolgreich umschalten:
<div id = "app"> <button @klick = "toShow"> klicken, um die untergeordnete Komponent-Anzeige </button> <Komponenten v-Bind: is = "wot_to_show"> </component> </div> <script> var vm = new Vue ({el: '#App' ["First", "Second", "dritte", "]; Vorlage: "<div> Hier ist die untergeordnete Komponente 1 </div>"}, Sekunde: {// Die zweite untergeordnete Komponenten -Template: "<Div> Hier ist die untergeordnete Komponente 2, hier ist der Inhalt nach AJAX: {{Hallo}} </div>", Daten: Funktion () {return {hello: "}}, actioning: actioning: acting: {divuing) {erledigt) {erledigt) {erledigt. geschaltet. 3 </div> "}}}); </script>Codeffekt:
【1】 Wenn Sie erstmals auf Komponente 2 wechseln, müssen Sie 2 Sekunden vor der Anzeige warten (weil Ajax eingeleitet wird).
[2] Im Falle von Keep-Alive besteht beim Umschalten auf Komponente 2 in der zweiten oder später keine Notwendigkeit zu warten. Der AJAX -Inhalt muss jedoch zwei Sekunden nach dem ersten Initiieren von AJAX angezeigt werden.
【3】 Ohne Keep-Alive (es wird nach dem Ausschalten nicht im Speicher gespeichert) müssen Sie beim zweiten Mal noch warten, wenn Sie auf Komponente 2 umstellen.
[4] Beim Warten wirkt es sich nicht erneut um den Umschalter aus (dh beim Warten auf Komponente 2 klicken Sie, um erneut zu wechseln, um direkt auf Komponente 3 zu wechseln).
veranschaulichen:
【1】 aktiviert wird nur ausgeführt, wenn die Komponente zum ersten Mal gerendert wird und die Funktion nur einmal ausgeführt wird (die Komponente erscheint verzögert, wenn die Komponente angezeigt wird).
【2】 Wenn es keinen Keep-Alive gibt, wird jedes Mal, wenn die Switch-Komponente erscheint, erneut gerendert (weil der Zerstörerprozess zuvor ausgeführt wurde), sodass die Aktivitätsmethode ausgeführt wird.
⑤Tansition-Mode-Übergangsmodus
Einfach ausgedrückt lassen, lassen Sie die dynamische Komponente in die Animation ändern. (Denken Sie an die Anweisungen im Übergangsabschnitt, Übergänge sind für dynamische Komponenten geeignet.)
Standardmäßig werden Einstieg und Beenden zusammen abgeschlossen; (Der Inhalt, der eingeht, kann unter dem Ausgangsinhalt erscheinen, der sich auf die untere Seite der y-Achse bezieht. Nach dem Verlassen wird der Eintrag in der richtigen Position angezeigt.)
Wenn Transition-mode = "Out-in" "ist, soll die Animation zuerst beenden und dann eingeben.
Wenn Transition-Mode = "Out” “ist, ist die Animation an erster Stelle und später (wie Probleme, die anfällig für die Standardeinstellung auftreten);
Beispielcode: (Verwendung benutzerdefinierter Übergangsname und Animate.css -Datei)
<div id = "app"> <button @klick = "toShow"> klicken, um die untergeordnete Komponentenanzeige </button> <Komponenten v-Bind: is = "wot_to_show" transition = "sprung" transition-mode = "Out-in"> </component> </div> <div> </div> <Strounne> vue.transition ("Bounce", "Bount", ",", ",", ",", ",", "," Bount "," ', "Bounclight", " }) var vm = new vue ({el: '#app', data: {was_to_show: "First"}, Methoden: {toshow: function () {// component display var arr = ["First", "Second", "Dritter", "]; 1];} else {this.which_to_show = arr [0]; function () {return {hello: ""}}}, dritte: {// Die dritte Child -Komponenten -Vorlage: "<Div> ist hier untergeordnetes Komponenten 3 </div>"}}}}); </script>Das obige ist die dynamische Komponente des vom Herausgebers eingeführten 12. Kapitels von VueJS. 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!