钩子函数
bind
只调用一次，指令第一次绑定到元素时调用适用于绑定css样式 inserted
被绑定元素插入父节点时调用适用于绑定js方法 update
所在组件的VNode更新是调用
钩子函数参数
el - 指令绑定元素，可以用于直接操作DOMbinding - 一个对象
name 指令名value 指令绑定值（可以理解为外部参数传递）
例如：v-my-directive = "1 + 1"绑定值为2支持对象形式 oldValue 指令绑定前一个值expression 字符串形式的指令表达式
例如：v-my-directive = "1 + 1"表达式为1 + 1 arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
注意要点
所有的指令都必须以v-开头
js中定义需以驼峰式命名
html中调用以-进行分割
<input type="text" v-model='keywords' placeholder="请输入搜索内容" v-color-test="'blue'">
<script>
Vue.directive('colorTest',function(el,binding){
el.style.color = binding.value
})
</script>
全局定义
Vue
.directive('focus', {
inserted
: function (el
) {
el
.focus()
}
})
私有定义
const vue
= new Vue({
directives
: {
focus
: {
inserted
: function (el
) {
el
.focus()
}
}
}
})
简写
在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:
Vue
.directive('color-swatch', function (el
, binding
) {
el
.style
.backgroundColor
= binding
.value
})
