首先，我们都知道vue有很多内置指令，比如：v-if，v-show，v-html等等，有些时候我们需要自己定义指令处理项目中的一些问题，下面就按官网的案例开始学习，此篇仅作为学习记录。
全局指令和局部指令
// main.js 不一定非得叫这个名称
// 全局指令
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// xxx.vue文件
// 局部指令
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用
钩子参数
// html
<div id="app" v-demo:foo.a.b="message"></div>
// js
Vue.directive('demo', {
bind: function (el, binding, vnode) {
// el: 指令所绑定的元素，可以用来直接操作 DOM，除了el外，其他参数都是只读的，请勿修改
**binding对象，内容如下
// binding.name: 指令的名字，不带v-的部分，此案例中的demo
// binding.value: 指令绑定的值，=号后面的部分，此案例中的message的值，即"hello!"。也可以传对象。
// binding.oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。
// binding.expression: 字符串形式的指令表达式，此案例中真正的message
// binding.arg: 指令的参数，冒号后面的第一个值，此案例中的foo
// binding.modifiers: 一个包含修饰符的对象, 冒号后面第二个及以后的值，以{ foo: true, bar: true }的形式展示
**vnode对象
// vnode: Vue 编译生成的虚拟节点。包含tag，text，children，data等等
}
})
new Vue({
el: '#app',
data: {
message: 'hello!'
}
})
binding对象输出结果
动态参数
拿上面的案例，binding.arg是写死的foo，我们有时候想要动态的值
// xxx.vue
<div id="app">
<p v-pin:[direction]="200">我要偏移200px,但是我要根据direction来判断方向</p>
</div>
// js
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
var s = (binding.arg == 'left' ? 'left' : 'top')
el.style[s] = binding.value + 'px'
}
})
new Vue({
el: '#app',
data: function () {
return {
direction: 'left'
}
}
})
简写方式
你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。这应该是项目中最常用的写法
// xxx.vue
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
// js
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
