1、局部指令定义
范围:仅限于定义时关联的 vue 实例的容器中使用
-
定义:
new Vue({ directives:{ key[string]:value[Fuction] } })
- key(string):指令名称 ,定义完成后,页面使用需
v-
前缀调用指令- 如果名称为驼峰命名方式 (例如 imgLazy) ,页面使用时需要转换为 连字符 (v-img-lazy)
- value(Function):
function( el,binding,newVnode,oldVnode ){}
指令执行函数- el : 调用指令的当前DOM对象
- binding : 是一个对象 ,对象中包含了指令构成参数、修饰符、取值 ……
- name: 指令名称
- rawName: 指令调用时的表达式
- expression: 指令取值表单时,
=
右侧的取值表达式 - arg: 指令参数 ,
:
后定义的参数名称 - oldArg: 是指令 : 后定义的 旧的参数名称
- value: 指令 = 右侧 表达式的计算结果
- oldValue:指令绑定变量发生变化后,调用该方法时 ,存储的 上次的结果值
- modifiers: 指令修饰符,
.
后定义的修饰符名称- modifiers 为 Object{ key:value } 类型数据
-
key 为修饰符名称,value取值 为 true
- true 作为value表示当前指令被启用
- 对象中没有修饰符key ,表示指令不启用
- 当没有修饰符时,表示该对象为空对象
- newVnode:指令更新后的新虚拟DOM
- oldVnode:指令更新前的旧虚拟DOM
- key(string):指令名称 ,定义完成后,页面使用需
使用:
<标签 v-自定义指令名[:参数][.修饰符.修饰符……][=取值] ></标签>
2、全局指令定义
范围:可以在 vue 的 任意对象的容器中使用
-
语法:
Vue.directive( id,definition )
- id=name : 定义指令名称
- definition :指令的处理函数,
function( el,binding,newVnode,oldVnode ){}
- 参数参考 局部指令
-
定义:全局指令定义必须在使用之前
Vue.directive("lazy",function( el,binding,newVnode,oldVnode ){ })
3、指令生命周期
- 一个指令从项目运行开始,到指令运行结束过程,vue为每个指令都提供固定的生命周期钩子函数
-
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 -
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 -
componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind
:只调用一次,指令与元素解绑时调用。
-
- 无论是全局指令定义,还是局部指令定以,definition取值可以为 Function 也可以为 Object
- 取值 Function,定义功能就是指令的处理函数
- 取值Object,定义的时指令的生命周期钩子函数的处理方法