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