1. 指令是什么?
指令(Directives) 是带有 v-
前缀的特殊 attribute
。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM 。
常见的指令有:v-model
, v-if
, v-for
等。
2. 指令参数
一个指令能够接受一个 “参数” ,在指令名称之后以冒号表示。如:
<p v-if="seen">现在你看到我了</p>
v-if
指令是用来控制 DOM 节点的插入或移除,在示例中 seen
就是 v-if
指令的参数。v-if
根据参数 seen
的值的 true/false 来插入或移除 <p>
节点。
当然指令的参数不是必须的。
3. 内置指令
在Vue中提供了非常多的内置指令:
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak
v-once
这次指令在日常的开发工作中大部分是经常用到的。
4. 自定义指令
在官方文档中,指令自定义给出的示例是 v-focus
, 通过此自定义指令,实现元素的聚焦。
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
指令的注册方式分为两种:
全局注册
局部注册
4.1. 全局注册
全局注册指令,可以在当前项目的任何组件中直接使用。上面的示例中,就是采用全局注册的方式。
4.2. 局部注册
局部注册指令,指令注册后,只能在当前组件中使用,在其他组件中无法使用该指令。
在组件中,提供有 directives
选项,该选项用来注册局部指令:
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
4.3. 使用
注册完组件后,我们就可以在DOM中进行使用该指令:
<input v-focus>
需要注意的是,我们注册指令的时候是使用的 focus
, 在使用指令时需要增加 v-
前缀。
5. 钩子函数
在上面的自定义示例中,可以看到 inserted
属性,在这里 inserted
称为钩子函数。
在Vue中,指令定义对象提供了如下几个钩子函数
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted
:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。update
:所在组件的VNode更新时调用,但是可能发生在其VNode更新之前。指令的值可能发生了改变,也可能没有。componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind
:只调用一次,指令与元素解绑时调用。
钩子函数提供了固定的参数,详细见官网:????钩子函数参数
6. Vue VS Angular
在 Angular
中也有指令,不过 Angular
的指令似乎比 Vue
的指令更强大。
在 Angular
中,指令可以有多个输入参数,指令的参数可以和组件公用。
7. 总结
在多数的项目开发过程中,Vue 内置的指令就基本上可以满足需求。在进行一些 UI 组件框架设计时,使用到自定义指令的机会比较多,如 Element UI 中就是用到了自定义指令。
指令是 Vue 的一个重要特性,理解了其作用才能更好的使用。
参考资料
????Vue官网
????Angular官网