Explain in detail the usage of Vue.directive() (detailed tutorial, including examples)

This article mainly introduces the usage and examples of Vue.directive(). Friends in need can refer to the

official website examples:

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

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

The directive definition function provides several hook functions (available (optional):

bind: Called only once, when the instruction is bound to an element for the first time. This hook function can be used to define an initialization action that is executed once when 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 get the 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) By 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: the bound element Called when a parent node is inserted (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 what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use EL expressions to obtain context parameter values ​​in JS

JS moves the left list to the right List function

Use of el expression in js and non-empty judgment method

The above is the detailed content of Explain in detail the usage of Vue.directive() (detailed tutorial, including examples). For more information, please follow other related articles on the PHP Chinese website!