1.什么是指令?
学习vue的时候肯定会接触到指令,那什么是指令呢?
- vue中提供了一些对于页面和数据更为方便的输出,这些操作就叫做指令,一般都是以v-开头
- 指令中封装了一些 DOM 行为,结合属性作为一个暗号,暗号有对应的值,根据不同的值,会进行相关 DOM 操作的绑定,即可以进行一些模板的操作
2.全局注册自定义指令
我们通过注册一个 v-focus 指令,实现了在页面加载完成之后自动让输入框获取到焦点的小功能。
Vue.directive("focus", {
inserted: function(el){
el.focus();
}
})
3.局部注册自定义指令
同样的是一个获取焦点的指令v-focus2,通过在Vue实例中添加 directives 对象数据注册局部自定义指令。
<script>
new Vue({
el: "#app",
directives: {
focus2: {
inserted: function(el){
el.focus();
}
}
}
})
</script>
可以在模板中任何元素上使用v-focus指令 像这样 输入框会自动获取到焦点
<div>
<input v-focus>
</div>
4.钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
- update:所在组件的 VNode 更新时调用。
- componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind:只调用一次,指令与元素解绑时调用。
官方文档:
自定义指令--Vue.js