vue自定义指令定义及使用方式

全局自定义指令

Vue.directive('focus', {
bind: function(el) { //表示当指令绑定到元素身上时会执行bind函数，只执行一次
//el代表被绑定指令的哪个元素，且函数中的第一个参数都为el.el是一个原生的js对象，里面有些元素的dom方法
// 绑定到元素身上时，数据尚在内存中，无法在页面中显示，所以el.focus()没有效果，而console.log('你好呀')可以显示
el.focus()
console.log('你好呀')
},
inserted: function(el) { //表示元素插入dom中的时候回执行inserted函数，只触发一次
el.focus()
},
updated: function() { //当vNode更新的时候回执行updated函数，可以会触发多次
}
})

私有指令

directives: { //定义私有指令
'wite': {
bind: function(el, binding) {
el.style.fontWeight = binding.value
}
}
}

调用方式

<input type="text" v-focus v-color="'blue'">

注意事项
1、bind钩子函数中如果使用一个行为，如focus()获取焦点就是一个行为，那么无法显示在页面上，但是如果是使用的是样式就可以在页面中显示，如果el.style.color = binding.value，这是改变字体颜色的。
2、binding是用来获取传入的值的。
3、指令定义时候不需要加v-但是调用时需要加上 v-
4、vue中一般全局定义方法关键字都不带s,而私有关键词带s