Detaillierte Erklärung zur Verwendung von Vue.directive()

Die Anweisungsdefinitionsfunktion stellt mehrere Hook-Funktionen bereit (optional):

bind: wird nur einmal aufgerufen, wenn die Anweisung zum ersten Mal an ein Element gebunden wird. Verwenden Sie diese Hook-Funktion, um eine zu definieren Eine Initialisierungsaktion, die einmal während der Bindung ausgeführt wird.
eingefügt: Wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (kann aufgerufen werden, solange der übergeordnete Knoten vorhanden ist, nicht unbedingt im Dokument).

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.

Ich habe mir die offizielle Website angesehen und war verwirrt, und dann habe ich zwei einfache Demos von Baidu Vue.directive() gepostet. Ich hoffe, Freunden zu helfen, die sie sehen.

1

2. Eine Drag-and-Drop-Demo: 1) Das gezogene Element muss mit der Position positioniert werden, bevor es gezogen werden kann.

2) Nachdem die benutzerdefinierte Anweisung abgeschlossen ist, muss Vue instanziiert werden das gemountete Element;

<p id="app"> 
<SPAN style="WHITE-SPACE: pre"> </SPAN><input type="text" v-focus/> 
</p> 

<p id="app">
 <input type="text" v-focus/>
</p>

// 注册一个全局自定义指令 v-focus  
Vue.directive(&#39;focus&#39;, { 
  // 当绑定元素插入到 DOM 中。  
  inserted: function (el,binding) { 
    <SPAN style="WHITE-SPACE: pre"> </SPAN>// 聚焦元素  
    <SPAN style="WHITE-SPACE: pre"> </SPAN>el.focus(); 
  } 
}); 
new Vue({ 
　　el:&#39;#app&#39; 
}); 
// 注册一个全局自定义指令 v-focus
Vue.directive(&#39;focus&#39;, {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el,binding) {
   // 聚焦元素
   el.focus();
 }
});
new Vue({
　　el:&#39;#app&#39;
});

3) 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, nicht unbedingt im Dokument).

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung zur Verwendung von Vue.directive(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!