Detaillierte grafische Erklärung von Vue.directive()

Dieses Mal bringe ich Ihnen eine detaillierte grafische Erklärung von Vue.directive(). Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vue.directive()?

Offizielles Website-Beispiel:

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

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

DirektiveDefinitionsfunktion stellt mehrere Hook-Funktionen bereit (optional):

bind: wird nur einmal aufgerufen, beim ersten Mal der Direktive Wird beim Binden an ein Element aufgerufen. Mit dieser Hook-Funktion können Sie eine Initialisierungsaktion definieren, die beim Binden einmal 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 dem Update können unnötige Template-Updates ignoriert werden (detaillierte Hook-Funktionsparameter 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 -Drop-Demo: 1) Das gezogene Element muss positioniert sein, bevor es gezogen werden kann;

2) Nachdem die benutzerdefinierte Anweisung abgeschlossen ist, müssen Sie Vue instanziieren und das Element mounten; ) eingefügt: wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (kann aufgerufen werden, solange der übergeordnete Knoten vorhanden ist und nicht im Dokument vorhanden sein muss).

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

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

Empfohlene Lektüre:

Verwenden Sie H5, um unzulässige Skalierung hinzuzufügen

So verwenden Sie den automatischen Generator in ionic2

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