Diese Informationen stammen aus dem offiziellen Dokument: http://cn.vuejs.org/guide/components.html#u52a8_u6001_U7ec4_u4ef6
Dieser Artikel basiert auf der offiziellen Dokumentation mit detaillierteren Erklärungen und vollständigeren Codes.
Einfach ausgedrückt, es ist für Anfänger besser geeignet zu lesen
①Simple:
Es soll mehrere Komponenten unter einen Mountspunkt platzieren und dann entscheiden, welche auf der Grundlage einer Variablen der übergeordneten Komponente angezeigt werden soll, oder keiner davon wird 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 untergeordnetes Komponenten 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 untergeordnete Komponenten 1 </div>"}, Sekunde: {// Die zweite untergeordnete Komponentenvorlage: "<Div> Hier ist untergeordnetes Komponenten 2 </div>"}, dritte: {// Die dritte untergeordnete Komponentenvorlage: "<Viv> hier ist Child -Komponent 3 </div>"},}});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 auf das Umschalter aus (dh beim Warten auf Komponente 2 klicken Sie, um erneut umzuschalten, 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> Hier ist untergeordnete Komponente 3 </div>"}}}); </script>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.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.