如何深入掌握并高效运用Vue.js自定义指令？

本文共计1084个文字，预计阅读时间需要5分钟。

自定义指令+自定义指令的注册方法及组件、全局注册和局部注册类似，例如注册一个v-focus指令用于在input、textarea元素初始化时自动获取焦点，共有两种写法：//全局注册Vue.directive('v-focus', function(el) { el.focus(); }); //局部注册new Vue({ directives: { 'v-focus': function(el) { el.focus(); } } });

自定义指令

自定义指令的注册方法和组件很像，也分全局注册和局部注册，比如注册一个v-focus指令用于在<input>、<textarea>元素初始化时自动获得焦点，共有两种写法：

//全局注册 Vue.directive('focus',{ //指令选项 }); //局部注册 var app = new Vue({ el: '#app', directive: { focus: { //指令选项 } } });

自定义指令的选项是由几个钩子函数组成的，每个都是可选的。

自定义指令的各个选项如下：

• bind： 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted： 被绑定元素插入父节点时调用（父节点存在即可调用，不必在于document中）。
• update： 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。