Detailed graphic explanation of Vue.directive()

This time I will bring you a detailed picture and text explanation of Vue.directive(), what are the precautions when using Vue.directive(), the following is a practical case, let's take a look.

Official website example:

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

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

DirectiveDefinition function Provides several hook functions (optional):

bind: only called once, the first time the directive Called when bound to an element. Use this hook function 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 (detailed hookfunction parameterssee below).

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Use H5 to add prohibited scaling

How to use the automatic generator in ionic2

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