Vue.directive()的图文详解

官网实例：

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

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

指令定义函数提供了几个钩子函数（可选）：

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

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

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

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

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

<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、一个拖拽的demo: 1)被拖拽的元素必须用position定位，才能被拖动；

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

3)inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 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'   });

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

使用H5做出添加禁止缩放

ionic2中怎么使用自动生成器

以上就是Vue.directive()的图文详解的详细内容，更多内容请关注技术你好其它相关文章！