官网实例:

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

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

 

指令定义函数提供了几个钩子函数(可选):

  • bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

  • inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

  • update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

  • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

  • unbind: 只调用一次, 指令与元素解绑时调用。

 

 

本人菜鸟型,看官网蒙圈,然后百度Vue.directive()的实例和用法,有的很高深,有的不健全,我贴上两个简单的demo,希望对看到的朋友有帮助:

1、官网给出的demo,刷新页面input自动获取焦点:

 

[html] view plain copy
 
  1. <div id="app">  
  2. <span style="white-space:pre;"</span><input type="text" v-focus/>  
  3. </div>  

 

 

[javascript] view plain copy
 
  1. // 注册一个全局自定义指令 v-focus  
  2. Vue.directive('focus', {  
  3.     // 当绑定元素插入到 DOM 中。  
  4.     inserted: function (el,binding) {  
  5.         <span style="white-space:pre;"> </span>// 聚焦元素  
  6.         <span style="white-space:pre;"> </span>el.focus();  
  7.     }  
  8. });  
  9.   
  10. new Vue({  
  11.   el:'#app'  
  12. });  


2、一个拖拽的demo:

1)被拖拽的元素必须用position定位,才能被拖动;

2)自定义指令完成后需要实例化Vue,挂载元素;

3)inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

 

[html] view plain copy
 
  1. <style type="text/css">  
  2.     .one,.two{  
  3.         height:100px;  
  4.         width:100px;  
  5.         border:1px solid #000;  
  6.         position: absolute;  
  7.         -webkit-user-select: none;  
  8.         -ms-user-select: none;  
  9.         -moz-user-select: -moz-none;  
  10.         cursor: pointer;  
  11.     }  
  12.     .two{  
  13.         left:200px;  
  14.     }  
  15. </style>  
  16.   
  17. <div id="app">  
  18.     <div class="one" v-drag>拖拽one</div>  
  19.     <div class="two" v-drag>拖拽two</div>  
  20. </div>  



 

[javascript] view plain copy
 
    1. Vue.directive('drag', {  
    2.     inserted:function(el){  
    3.         el.onmousedown=function(e){  
    4.             let l=e.clientX-el.offsetLeft;  
    5.             let t=e.clientY-el.offsetTop;  
    6.             document.onmousemove=function(e){  
    7.                 el.style.left=e.clientX-l+'px';  
    8.                 el.style.top=e.clientY-t+'px';  
    9.             };  
    10.             el.onmouseup=function(){  
    11.                 document.onmousemove=null;  
    12.                 el.onmouseup=null;  
    13.             }  
    14.         }  
    15.     }  
    16. })  
    17. new Vue({  
    18.   el:'#app'  
    19. });