# 自定义指令
有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
比如:获取文本框的焦点
# 自定义指令
- 自定义一个指令
- 使用一个自定义指令
1
2
2
定义一个全局的指令
// 注册一个全局自定义指令 `v-focus`
// 参数1:指令的名称
// 参数2:指令的配置项(钩子函数)
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
// el: 当前绑定的元素
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
使用自定义指令
<input v-focus>
1
# 全局指令与局部指令
定义全局指令
// 注册一个全局自定义指令 `v-focus`
// 参数1:指令的名称
// 参数2:指令的配置项(钩子函数)
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
// el: 当前绑定的元素
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
定义局部指令
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 指令的钩子函数
bind
: 只会调用一次,当指令绑定到当前元素上时调用inserted
: 被绑定元素插入父节点时调用update
: 指令的值发生改变的时候componentUpdated
: 指令所在的组件中所有的DOM都更新完成的时候unbind
:只调用一次,指令与元素解绑时调用。
Vue.directive('focus', {
// 只会调用一次,当指令绑定到当前元素上时调用
bind (el) {
},
// 当前元素被插入到父节点的时候调用(渲染时)
inserted (el) {
el.focus()
},
// 当指令对应的数据发生改变的时候
update () {
},
// 所有的DOM都更新之后
componentUpdated () {
},
// 指令与元素解绑的时候
unbind () {
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 钩子函数的参数
所有的钩子函数两个参数el
和binding
指令的组成
v-指令名:指令参数.指令修饰符.指令修饰符 = "指令的值"
v-on:click.enter.prevent = "clickFn"
1
2
2
指令的参数
el: 当前元素
binding:一个对象,包含以下属性:
name:指令名,不包括 v- 前缀。
value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。
oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。
arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。
modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 实现一个v-text指令
# 实现一个v-bind指令
# 实现一个v-on指令
# 实现了一个v-color
# 指令的简写
在很多时候,你可能想在 bind
和 update
时触发相同行为,而不关心其它的钩子。比如这样写:
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
1
2
3
2
3