在项目中经常会用到一些通用功能，比如输入框的电话号码校验、邮箱校验、身份证号校验等。这时候使用vue自定义指令，就可以让我们做到一处定义，全局使用，是代码简介高效、维护方便。
Vue.directive('mydirective', {
//1.做绑定的准备工作比如添加事件监听器，或是其他只需要执行一次的复杂操作
bind: function(el, binding, vnode) {
console.log('1 - bind');
},
// 2.绑定到节点
inserted: function(el, binding, vnode) {
console.log('2 - inserted');
},
// 3.组件更新 //根据获得的新值执行对应的更新 //对于初始值也会调用一次
update: function(el, binding, vnode, oldVnode) {
console.log('3 - update');
},
// 4.组件更新完成
componentUpdated: function(el, binding, vnode, oldVnode) {
console.log('4 - componentUpdated');
},
// 5.解绑 // 做清理操作 //比如移除bind时绑定的事件监听器
unbind: function(el, binding, vnode) {
console.log('5 - bind');
}
})
钩子函数
-
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
-
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
-
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
-
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
-
unbind:只调用一次，指令与元素解绑时调用。
