Erklären Sie ausführlich die Verwendung von Vue.directive() (ausführliches Tutorial, einschließlich Beispielen).

In diesem Artikel werden hauptsächlich die Verwendung und Beispiele von Vue.directive() vorgestellt. Freunde in Not können sich auf die

Offizielle Website-Beispiele beziehen:

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

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

Die Direktivendefinitionsfunktion bietet mehrere Hook-Funktionen (verfügbar Optional):

bind: Wird nur einmal aufgerufen, wenn die Anweisung zum ersten Mal an ein Element gebunden wird. Mit dieser Hook-Funktion kann eine Initialisierungsaktion definiert werden, 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 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 gepostet Helfen Sie Freunden, die sie sehen. Vue.directive()

1. Die Demo auf der offiziellen Website, aktualisieren Sie die Seiteneingabe und gewinnen Sie automatisch den Fokus:

<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 Element muss mit position positioniert werden, kann gezogen werden;

2) Nachdem die benutzerdefinierte Anweisung abgeschlossen ist, muss Vue instanziiert werden, um das Element zu mounten

3) eingefügt: aufgerufen, wenn die Bindung erfolgt Das Element wird in den übergeordneten Knoten eingefügt (übergeordneter Knoten Es kann aufgerufen werden, wenn es existiert, es muss nicht im Dokument vorhanden sein).

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie EL-Ausdrücke, um Kontextparameterwerte in JS zu erhalten

JS verschiebt die linke Liste nach die richtige Listenfunktion

Verwendung des el-Ausdrucks in js und nicht-leerer Beurteilungsmethode

Das obige ist der detaillierte Inhalt vonErklären Sie ausführlich die Verwendung von Vue.directive() (ausführliches Tutorial, einschließlich Beispielen).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!