Heim > Artikel > Web-Frontend > Was ist vue.js Mixin?
Was ist vue.js Mixin?
- 青灯夜游Original
- 2020-11-23 11:01:301666Durchsuche
Mixing in vue.js ist eine Methode oder berechnete Eigenschaft, die wiederverwendbare Funktionen in Vue-Komponenten verteilt. Zweck: 1. Nachdem der Konstruktor geschrieben wurde, wird er beim Hinzufügen von Methoden oder temporären Aktivitäten verwendet Reduziert die Verschmutzung des Quellcodes. 2. Bei Verwendung öffentlicher Methoden kann die Verwendung von Mix-Ins die Codemenge reduzieren und eine Wiederverwendung des Codes ermöglichen.
Diese Methode ist für alle Computermarken geeignet.
Mixins definieren einen Teil wiederverwendbarer Methoden oder berechneter Eigenschaften. Mixins können beliebige Komponentenoptionen enthalten. Wenn eine Komponente ein Mixin-Objekt verwendet, werden alle Optionen des Mixin-Objekts in die Optionen der Komponente selbst gemischt.
Mixins haben im Allgemeinen zwei Verwendungszwecke:
1. Nachdem Sie den Konstruktor geschrieben haben, müssen Sie zu diesem Zeitpunkt Methoden oder Methoden für temporäre Aktivitäten hinzufügen, um die Verschmutzung des Quellcodes zu verringern.
2. Durch die Verwendung der Mischmethode kann die Codemenge reduziert und eine Wiederverwendung des Codes erreicht werden.
Grundlegende Verwendung von Mixins
Wir haben jetzt ein digitales Klick-Inkrementierungsprogramm, wir hoffen, dass jedes Mal, wenn sich die Daten ändern, eine Meldung auf der Konsole angezeigt wird: „Datenänderungen“.
Code-Implementierungsprozess:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Mixins Option Demo</title>
</head>
<body>
<h1>Mixins Option Demo</h1>
<hr>
<div id="app">
<p>num:{{ num }}</p>
<P><button @click="add">增加数量</button></P>
</div>
<script type="text/javascript">
//额外临时加入时，用于显示日志
var addLog={
updated:function(){
console.log("数据放生变化,变化成"+this.num+".");
}
}
var app=new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
mixins:[addLog]//混入
})
</script>
</body>
</html>
Die Aufrufreihenfolge der Mixins
updated:function(){
console.log("构造器里的updated方法。")
},Zu diesem Zeitpunkt lautet die Reihenfolge der Konsolenausgabe: Die aktualisierte Methode in der Konstrukteur.
Globale API-Mix-In-Methode
Vue.mixin({
updated:function(){
console.log('我是全局被混入的');
}
})PS: Die Ausführungsreihenfolge globaler Mix-Ins ist vor Methoden in Mix-Ins und Konstruktoren. 🔜 Besuchen Sie: Einführung in die Programmierung
! !Das obige ist der detaillierte Inhalt vonWas ist vue.js Mixin?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!