Explication graphique détaillée de Vue.directive()

Cette fois, je vous apporte une explication détaillée de Vue.directive() avec des images et du texte. Quelles sont les précautions lors de l'utilisation de Vue.directive() Ce qui suit est un cas pratique, prenons un. regarder.

Exemple de site officiel :

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

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

DirectiveFonction de définition fournit plusieurs fonctions hook (facultatif) :

bind : appelé une seule fois, la première fois de la directive Appelé lorsqu'il est lié à un élément. Utilisez cette fonction de hook 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 (hook détaillé paramètres de fonction voir ci-dessous).

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

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('drag', { 
  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+'px'; 
        el.style.top=e.clientY-t+'px'; 
      }; 
      el.onmouseup=function(){ 
        document.onmousemove=null; 
        el.onmouseup=null; 
      } 
    } 
  } 
}) 
new Vue({ 
　　el:'#app' 
});

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le sujet. Site Web chinois PHP !

Lecture recommandée :

Utilisez H5 pour ajouter une mise à l'échelle non autorisée

Comment utiliser le générateur automatique dans ionic2

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!