Expliquer en détail l'utilisation de Vue.directive() (tutoriel détaillé, comprenant des exemples)

Cet article présente principalement l'utilisation et des exemples de Vue.directive(). Les amis dans le besoin peuvent se référer aux

Exemples de sites Web officiels :

https://cn.vuejs.org. /v2/api/#Vue-directive

https://cn.vuejs.org/v2/guide/custom-directive.html

La fonction de définition de directive fournit plusieurs fonctions de hook (disponibles Facultatif) :

bind : Appelée une seule fois, lorsque l'instruction est liée à un élément pour la première fois. Cette fonction de hook peut être utilisée pour définir une action d'initialisation qui est exécutée une fois lors de 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'ai essayé de comprendre les exemples et l'utilisation de Vue.directive() sur Baidu. Certains sont très profonds et d'autres 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. démo : 1) L'élément déplacé doit être positionné avant de pouvoir être déplacé

2) Une fois l'instruction personnalisée terminée, vous devez instancier Vue et monter l'élément

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 et n'a pas besoin d'exister dans le document).

<style type="text/css"> 
  .one,.two{ 
    height:100px; 
    width:100px; 
    border:1px solid #000; 
    position: absolute; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    -moz-user-select: -moz-none; 
    cursor: pointer; 
  } 
  .two{ 
    left:200px; 
  } 
</style> 
<p id="app"> 
  <p class="one" v-drag>拖拽one</p> 
  <p class="two" v-drag>拖拽two</p> 
</p> 
<style type="text/css">
 .one,.two{
 height:100px;
 width:100px;
 border:1px solid #000;
 position: absolute;
 -webkit-user-select: none;
 -ms-user-select: none;
 -moz-user-select: -moz-none;
 cursor: pointer;
 }
 .two{
 left:200px;
 }
</style>
<p id="app">
 <p class="one" v-drag>拖拽one</p>
 <p class="two" v-drag>拖拽two</p>
</p>
[javascript] view plain copy print?Vue.directive(&#39;drag&#39;, { 
  inserted:function(el){ 
    el.onmousedown=function(e){ 
      let l=e.clientX-el.offsetLeft; 
      let t=e.clientY-el.offsetTop; 
      document.onmousemove=function(e){ 
        el.style.left=e.clientX-l+&#39;px&#39;; 
        el.style.top=e.clientY-t+&#39;px&#39;; 
      }; 
      el.onmouseup=function(){ 
        document.onmousemove=null; 
        el.onmouseup=null; 
      } 
    } 
  } 
}) 
new Vue({ 
　　el:&#39;#app&#39; 
});

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser les expressions EL pour obtenir les valeurs des paramètres de contexte dans JS

JS déplace la liste de gauche vers la bonne fonction List

Utilisation de l'expression el en js et méthode de jugement non vide

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!