# 文档初探(十二): 自定义指令
Vue 提供了v-on, v-bind等指令给我们使用, 同时也提供了自定义指令的功能.
下面实现一个页面加载后自动对输入框 focus 的功能
// 全局注册
Vue.directive("focus", {
inserted(el) {
el.focus();
}
});
new Vue({
el: "#app",
template: `
<input v-focus/> //绑定元素
`
});
// 局部注册
directives: {
inserted(el){
el.focus();
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 钩子函数
指令里有几个钩子函数可以调用:
bind: 只调用一次, 当指令第一次绑定元素时才会调用.在这里可以做一些一次性的操作.inserted: 在绑定元素插入到父节点的时候调用.update: 在包含指令的组件的 VNode 更新时,但又在包含指令的组件的子组件更新之前调用. 这个指令的值可能会也可能不会改变, 所以你可以跳过不必要的更新, 通过对比绑定的当前值与之前的值是否有差异(下面会介绍到).componentUpdated: 在包含指令的组件的 VNode以及其子组件都更新后调用.unbind: 只调用一次, 当指令解绑时调用.
# 钩子函数的参数
el: 指绑定指令的元素, 可以用它直接操作 DOM.binding: 包含以下属性的对象:name: 指令的名字, 没有v-前缀.value: 传递给指令的值.比如v-x="1+1", 那么value的值是2.oldValue: 之前的value, 只能在update和componentUpdate两个钩子里使用.无论value是否改变都可以使用.expression: 上面举例value里的1+1就是一个表达式.arg: 传递给指令的参数. 如v-y:foo,arg就是foo.modifiers: 包含修饰符的对象, 如果存在.比如v-z:foo.bar, 那么修饰符对象就是{foo: true, bar: true}
vnode: 由 Vue 的编译器生成的虚拟节点.oldVnode: 之前的vnode, 只能在update和componentUpdate两个钩子里使用.
WARNING
除了el之外, 其他参数都应当作为只读且不可修改的.
# 动态指令参数
指令参数可以是动态的, 可以写成这种形式:v-n:[arguments]=value. argument可以根据data的属性动态地传入进组件实例.