D - Vue 自定义指令

开端

指令前缀是 v- ,自动加上去,也取消不了

全局定义:Vue.directive( id, [definition] )
 id: string 指令名
 [definition]: Function | Object

局部选项:directives : Object

directives:{
	指令名:{
		...
	},
	...
}

钩子函数

达到一定的时机,会自动触发的函数

bind

只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

inserted

被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)

update

所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)

componentUpdated

指令所在组件的 VNode 及其子 VNode 全部更新后调用

unbind

只调用一次，指令与元素解绑时调用

钩子函数参数

顺序表示参数位置 ( el , binding , vnode , oldVnode )
第一个参数el

指令所绑定的元素，可以用来直接操作 DOM

第二个参数binding

一个对象，包含以下 属性
name:指令名，不包括 v- 前缀
value:指令的绑定值,例如:v-aa="1+1",value=2
oldValue:指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用
expression:字符串形式的指令表达式,例如:v-aa="1+1",expression="1+1"
arg:传给指令的参数，可选 . 例如: v-aa:b , arg="b"
modifiers:一个包含修饰符的对象,例如:v-aa.a , mdoifiers={ a:true }

第三个参数vnode

我不会,长大后在学习~

第四个参数oldVnode

我不会,长大后在学习~

动态指令参数

和动态参数一个意思
v-aa:[动态参数]

温馨提示

指令的值能够接受所有合法的 JavaScript 表达式