Detailed explanation on the usage of Vue.directive()

The instruction definition function provides several hook functions (optional):

bind: only called once, called when the instruction is bound to an element for the first time. This hook function can be used to define a An initialization action performed once during binding.
inserted: Called when the bound element is inserted into the parent node (it can be called as long as the parent node exists and does not have to exist in the document).

update: Called when the template where the bound element is located is updated, regardless of whether the binding value changes. By comparing the binding values ​​before and after the update, unnecessary template updates can be ignored (see below for detailed hook function parameters).

componentUpdated: Called when the template where the bound element is located completes an update cycle.

unbind: Called only once, when the instruction is unbound from the element.

I am a novice. I looked at the official website and was confused, and then Baidu Vue.directive() examples and usage, some are very profound, some are not perfect, I posted two simple ones Demo, I hope it will be helpful to friends who see it:

1. The demo given by the official website, refresh the page input and automatically gain 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. A drag-and-drop demo: 1) The dragged element must be positioned with position before it can be dragged;

2) After the custom instruction is completed, Vue needs to be instantiated and the element mounted;

3)inserted: Called when the bound element is inserted into the parent node (it can be called as long as the parent node exists, it does not have to exist in the 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; 
});

The above is the detailed content of Detailed explanation on the usage of Vue.directive(). For more information, please follow other related articles on the PHP Chinese website!