Vue.js如何深入掌握自定义指令的运用技巧？

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

自定义指令及其注册方法与组件非常相似，也支持全局注册和局部注册。例如，注册一个 `v-focus` 指令，使其在 `input` 和 `textarea` 元素初始化时自动获取焦点。共有两种写法：`// 全局注册 Vue.directive('direc', ...)`

自定义指令

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

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

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

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

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