Detaillierte Erklärung der Mixins in Vue.js
1. Grundlegende Verwendung von MixinsNun gibt es ein Programm, das Zahlen durch Klicken hochzählt. Vorausgesetzt, es ist fertig, hoffen wir, dass bei jeder Änderung der Daten eine Meldung „Daten haben sich geändert“ in der Konsole ausgegeben werden kann. Code-Implementierungsprozess:
<div id="app">
<p>Anzahl:{{ Anzahl }}</p>
<P><button @click="add">Menge hinzufügen</button></P>
</div>
<Skript>
var addLog = {
// Mischen Sie den aktualisierten Hook in die Vue-Instanz updated() {
console.log("Die Daten ändern sich in " + this.num + ".");
}
}
var app = new Vue({
el: '#app',
Daten: {
Zahl: 1
},
Methoden: {
hinzufügen: Funktion () {
diese.num++;
}
},
Mixins: [addLog], //mixin})
</Skript>
Wenn auf die Schaltfläche geklickt wird, wird die aktualisierte Methode im gemischten AddLog ausgelöst. 2. Die Aufrufreihenfolge von Mixins
Wir haben außerdem die aktualisierte Hook-Funktion zum Konstruktor des obigen Codes hinzugefügt:
<div id="app">
<p>Anzahl:{{ Anzahl }}</p>
<P><button @click="add">Menge hinzufügen</button></P>
</div>
<Skript>
var addLog = {
aktualisiert : Funktion () {
console.log("Die Daten ändern sich in " + this.num + ".");
}
}
var app = new Vue({
el: '#app',
Daten: {
Zahl: 1
},
Methoden: {
hinzufügen: Funktion () {
diese.num++;
}
},
aktualisiert: Funktion () {
console.log("Methode im Konstruktor aktualisiert.")
},
Mixins: [addLog], //mixin})
</Skript>
3. Globale Mixin-MethodeGlobale Mixins werden vor Mixins und Konstruktormethoden ausgeführt.
<div id="app">
<p>Anzahl:{{ Anzahl }}</p>
<P><button @click="add">Menge hinzufügen</button></P>
</div>
<Skript>
Vue.mixin({
aktualisiert: Funktion () {
console.log('Ich bin global eingebunden');
}
})
var addLog = {
aktualisiert : Funktion () {
console.log("Die Daten ändern sich in " + this.num + ".");
}
}
var app = new Vue({
el: '#app',
Daten: {
Zahl: 1
},
Methoden: {
hinzufügen: Funktion () {
diese.num++;
}
},
aktualisiert: Funktion () {
console.log("Methode im Konstruktor aktualisiert.")
},
Mixins: [addLog], //mixin})
</Skript>
Sequentielle Zusammenfassung: Wenn zwei Objektschlüsselnamen in Konflikt stehen, nehmen Sie das Schlüssel-Wert-Paar des KomponentenobjektsWenn sowohl im Mixin als auch im Komponentenobjekt Testmethoden (mit demselben Namen) vorhanden sind, ist der endgültige Wert das Schlüssel-Wert-Paar des Komponentenobjekts.
<div id="app">
<p>Anzahl:{{ Anzahl }}</p>
<P>
<button @click="add">Menge hinzufügen</button>
</P>
</div>
<Skript>
var addLog = {
aktualisiert: Funktion () {
console.log("Die Daten ändern sich in " + this.num + ".");
dies.test();
},
Methoden: {
Test: Funktion () {
console.log('Test im Mixin')
}
}
}
var app = new Vue({
el: '#app',
Daten: {
Zahl: 1
},
Methoden: {
hinzufügen: Funktion () {
diese.num++;
},
test:funktion(){
console.log('Test im Komponentenobjekt')
}
},
Mixins: [addLog], //mixin})
</Skript>
Dies ist das Ende dieses Artikels über Vue.js-Mixins. Weitere Informationen zu Vue.js-Mixins finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
>>: Zusammenfassung der allgemeinen MySQL-Funktionen
Artikel empfehlen
Docker führt Vorgänge mit dem angegebenen Speicher aus
wie folgt: -m, --memory Speicherlimit, das Format...
Grundlegende Kenntnisse zum MySQL UNION-Operator
MySQL UNION-Operator Dieses Tutorial stellt die S...
So migrieren Sie lokales MySQL in eine Serverdatenbank
Wir können den scp-Befehl von Linux (scp kann unt...
Detaillierte Erklärung der Verwendung der MySQL-Transaktionsverarbeitung und Beispielcode
Die MySQL-Transaktionsunterstützung ist nicht an ...
Einführung in die Leistungsoptimierung von MySQL-Datenbanken
Inhaltsverzeichnis Warum optimieren? ? Wo soll ic...
JS implementiert Click-Drop-Effekt
js realisiert den Spezialeffekt des Klickens und ...
CSS3 realisiert das Papierflugzeug aus der Kindheit
Heute werden wir Origami-Flugzeuge basteln (die A...
Ein kurzer Vortrag über JavaScript Sandbox
Vorwort: Apropos Sandboxen: Wir denken vielleicht...
Detaillierte Erläuterung der Idee, mit CSS-Animation den Punkteeffekt zu erzielen
Im aktuellen Projekt müssen wir einen Effekt zum ...
Grundlegende Operationen der MySQL-Lernnotizentabelle
Tabelle erstellen Tabelle erstellen Tabellenname ...
Detaillierte Erklärung der Destrukturierungszuweisungssyntax in Javascript
Vorwort Die erstmals in ES6 eingeführte „Destruct...
Detaillierte Erklärung der CSS3-Animation und der neuen Funktionen von HTML5
1. CSS3-Animation ☺CSS3-Animationen sind viel ein...
Win2008 R2 MySQL 5.5 ZIP-Format MySQL-Installation und -Konfiguration
Installation und Konfiguration von MySQL im ZIP-F...
So setzen Sie das Passwort zurück, wenn Sie es in MySQL8 vergessen haben (die alte MySQL-Methode funktioniert nicht)
Die Befehlszeile mysqld –skip-grant-tables kann i...
Verwenden Sie Docker Compose, um ELK schnell bereitzustellen (getestet und effektiv)
Inhaltsverzeichnis 1. Übersicht 1.1 Definition 1....