什么是指令?
指令系统是计算机硬件的语言系统,也叫机器语言,它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力
在vue
中提供了一套为数据驱动视图更为方便的操作,这些操作被称为指令系统
我们看到的v-
开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能
除了核心功能默认内置的指令 (v-model
和 v-show
),Vue
也允许注册自定义指令
实现
注册一个自定义指令有全局注册与局部注册
全局注册主要是通过vue.directive方法进行注册
vue.directive第一个参数是指令的名字(不需要写v-前缀),第二个参数可以是对象数据,也可以是以指令函数
局部注册通过在组件options选项中设置directive属性
自定义指令也可以想组件那样存在钩子函数:
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)
update
:所在组件的 VNode
更新时调用,但是可能发生在其子 VNode
更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated
:指令所在组件的 VNode
及其子 VNode
全部更新后调用
unbind
:只调用一次,指令与元素解绑时调用
应用场景
- 表单防止重复提交
- 图片懒加载
- 一键 Copy的功能