Vue-Direktive Direktive

In diesem Artikel erfahren Sie, wie Sie die Vue-Direktive als Referenz verwenden. Der spezifische Inhalt ist wie folgt: 1. Registrierung von Direktiven

Direktiven müssen genau wie Komponenten vor ihnen registriert werden Es gibt auch zwei Möglichkeiten:

Vue.directive('dirName',function(){
 
　　//定义指令
 
});

Die andere ist lokale Registrierung:

new Vue({
 
　　directives:{
 
　　　　dirName:{
 
　　　　　　//定义指令
 
　　　　}
 
　　}
 
});

2. Definition von Anweisungen

Anweisungsdefinition, der Beamte stellt fünf Hook-Funktionen für unsere Verwendung bereit, die jeden Lebenszyklus darstellen einer Komponente.

bind: Wird nur einmal aufgerufen, wenn die Anweisung zum ersten Mal an ein Element gebunden wird. Mit dieser Hook-Funktion kann eine Initialisierungsaktion definiert werden, die einmal beim Binden ausgeführt wird.

eingefügt: Wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (es kann aufgerufen werden, solange der übergeordnete Knoten vorhanden ist und nicht im Dokument vorhanden sein muss).

Update: Wird aufgerufen, wenn die Vorlage, in der sich das gebundene Element befindet, aktualisiert wird, unabhängig davon, ob sich der Bindungswert ändert. Durch den Vergleich der Bindungswerte vor und nach der Aktualisierung können unnötige Vorlagenaktualisierungen ignoriert werden (detaillierte Parameter der Hook-Funktion siehe unten).

componentUpdated: Wird aufgerufen, wenn die Vorlage, in der sich das gebundene Element befindet, einen Aktualisierungszyklus abschließt.

unbind: Wird nur einmal aufgerufen, wenn die Bindung der Anweisung vom Element gelöst wird.

Die anderen hier sind leicht zu verstehen. Mein Verständnis lautet: Wenn sich die Vorlage, in der sich die Anweisung befindet, ändert und neu gerendert werden muss, z. B. wenn das Modell eines Wenn sich das Eingabefeld ändert, wird der Befehl ausgelöst. Natürlich ist das, was hier gesagt wird, eher vage und die Details müssen noch untersucht werden.

Dieser Code kann die Verwendung von Update

<p id="app">
　　<input type="text" v-focus="name" v-model="name" :data-name="name">
　　<button type="button" @click="name=&#39;zw&#39;">click</button>
 
　　<!--当点击按钮的时候name改变，继而触发update中的方法-->
</p>
<script>
 
　　Vue.directive(&#39;focus&#39;,{
　　　　bind: function(el, binding){
　　　　console.log(&#39;bind:&#39;,binding.value);
　　},
　　inserted: function(el, binding){
　　　　console.log(&#39;insert:&#39;,binding.value);
　　},
　　update: function(el, binding, vnode, oldVnode){
　　　　el.focus();
　　　　console.log(el.dataset.name);//这里的数据是可以动态绑定的
　　　　console.table({
　　　　　　name:binding.name,
　　　　　　value:binding.value,
　　　　　　oldValue:binding.oldValue,
　　　　　　expression:binding.expression,
　　　　　　arg:binding.arg,
　　　　　　modifiers:binding.modifiers,
　　　　　　vnode:vnode,
　　　　　　oldVnode:oldVnode
　　　　});
　　},
　　componentUpdated: function(el, binding){
　　　　console.log(&#39;componentUpdated:&#39;,binding.name);
　　}
});
new Vue({
　　el:&#39;#app&#39;,
　　data:{
　　　　name:&#39;zwzhai&#39;
　　}
});
</script>

3. Definition der Hook-Funktion

implementieren Im Folgenden sind einige offiziell bereitgestellte Parameter aufgeführt:

el: Das an die Anweisung gebundene Element kann zur direkten Manipulation des DOM verwendet werden.

Bindung: ein Objekt, das die folgenden Eigenschaften enthält:

Name: der Befehlsname, ohne das v-Präfix.
Wert: Der verbindliche Wert der Direktive, zum Beispiel: v-my-directive="1 + 1", der Wert von value ist 2.
oldValue: Der vorherige Wert der Anweisungsbindung, nur in Update- und ComponentUpdated-Hooks verfügbar. Verfügbar unabhängig davon, ob sich der Wert geändert hat.
Ausdruck: die Zeichenfolgenform des gebundenen Werts. Beispielsweise ist v-my-directive="1 + 1" der Wert von expression „1 + 1“.
arg: An den Befehl übergebene Parameter. Beispiel: v-my-directive:foo, der Wert von arg ist „foo“.
Modifikatoren: Ein Objekt, das Modifikatoren enthält. Beispiel: v-my-directive.foo.bar, der Wert der Modifikatorobjektmodifikatoren ist { foo: true, bar: true }.
vnode: Der durch die Vue-Kompilierung generierte virtuelle Knoten. Weitere Details finden Sie in der VNode-API.
oldVnode: Der vorherige virtuelle Knoten, nur in den Hooks „update“ und „componentUpdated“ verfügbar.


Jeder kann diese Parameter verstehen, indem er die Dokumentation liest, daher werde ich nicht auf Details eingehen. Für das Wertattribut können Sie Literale übergeben Sie können eine einzelne Anweisung (wie oben) auch in Form einer Variablen übergeben, z. B. ; string hier, denn in value Beim Zugriff auf den Bindungswert erhalten Sie nicht den direkt geschriebenen, d. h. v-focus="name". Dieser Name ist immer eine Variable und muss definiert und zugewiesen werden, und arg Wenn Sie direkt auf den Wert zugreifen können, z. B. v-focus :foo, erhalten Sie in der Hook-Funktion die Zeichenfolge foo.

Bidirektionale Datenbindung ist in Vue-Anweisungen nicht zulässig: Mit Ausnahme von el sollten andere Parameter schreibgeschützt sein. Wenn Sie Daten zwischen Hooks teilen müssen, wird empfohlen, dies über den Datensatz des Elements zu tun. Hier einige zusätzliche Informationen zum Datensatz:

data- ist ein neues Attribut von HTML5. Nach Überprüfung der Browser-Unterstützungsstufe sollte es von allen aktuellen Mainstream-Browsern 10 oder höher sein. Spezifische Verwendung: Schreiben Sie es als Attribut in HTML, data-yourname="value". Um dieses Attribut in js zu erhalten, müssen Sie nicht die Methode getAttribute verwenden, sondern direkt darauf zugreifen, ele.dataset.yourname, in js Sie können auch hinzufügen und löschen, add: ele.dataset.dessert="yourname", delete: das ist ele.dataset.name. Darüber hinaus kann dieses Attribut als CSS-Selektor verwendet werden: .class[Datenname]:{}.

Das Obige ist der Inhalt der Vue-Anweisungsanweisung. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).