对普通 DOM 元素进行底层操作,会用到自定义指令,我们以输入框获取焦点为例:
当页面加载时,输入框将获得焦
// 注册一个全局自定义指令 `v-focus`
// Vue.directive('指令名', {钩子函数} )
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 这里是Vue实例中注册一个局部指令 `v-focus`
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
在模板的所有元素中可以使用:
<input v-focus>
一个指令定义对象有常用的3个钩子函数:
bind:只调用一次,指令第一次绑定到元素时调用。进入DOM之前在内存中调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
directives: {
// 自定义指令1
focus1: {
// 指令的定义
bind: function (el) {
el.style.color = "red