Explication détaillée sur l'utilisation de Vue.directive()

La fonction de définition d'instruction fournit plusieurs fonctions hook (facultatif) :

bind : appelée une seule fois, lorsque l'instruction est liée à un élément pour la première fois. Utilisez cette fonction hook pour définir un. Action d'initialisation effectuée une fois pendant la liaison.
inséré : Appelé lorsque l'élément lié est inséré dans le nœud parent (il peut être appelé tant que le nœud parent existe, pas nécessairement dans le document).

update : appelé lorsque le modèle où se trouve l'élément lié est mis à jour, que la valeur de liaison change ou non. En comparant les valeurs de liaison avant et après la mise à jour, les mises à jour inutiles du modèle peuvent être ignorées (voir ci-dessous pour les paramètres détaillés de la fonction hook).

componentUpdated : appelé lorsque le modèle où se trouve l'élément lié termine un cycle de mise à jour.

unbind : Appelé une seule fois, lorsque l'instruction n'est pas liée à l'élément.

Je suis novice. J'ai regardé le site officiel et j'étais confus, puis Baidu Vue.directive() exemples et utilisation Certains sont très profonds, et certains ne sont pas parfaits, j'ai posté deux démos simples, dans l'espoir de le faire. aidez les amis qui les voient. Utile :

1. La démo donnée par le site officiel, actualisez la saisie de la page et gagnez automatiquement le focus :

<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;
});

2. Une démo par glisser-déposer : 1) L'élément glissé doit être positionné avec la position avant de pouvoir être glissé

2) Une fois l'instruction personnalisée terminée, Vue doit être instanciée et l'élément ; monté;

3) inséré : Appelé lorsque l'élément lié est inséré dans le nœud parent (il peut être appelé tant que le nœud parent existe, pas nécessairement dans le document).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!