vue 进阶系列之指令

vue 进阶之指令

vue里面有一些默认的指令,如v-show,v-if,v-model….，除了这些之外，我们还可以自定义指令来对纯 DOM 元素进行底层操。

因为vue里面没有提供其他的操作dom的api,所以对dom操作的时候，可以选择用指令的形式，特别是在v-for数据循环的时候需要对dom进行一些操作时，用指令可以分别对每一个item进行操作

So…如果想对dom进行操作，选择指令吧。又好看，又实在~~

注意:写指令命的时候若是用驼峰如setFocus,在元素中,要用v-set-focus!

注册指令的方式:

全局注册

Vue.directive('dir-name',{
bind:function(el,binding){

}
})

组件内注册

directives: {
dir-name: {
bind:function(el,binding){

}
}
}

指令的钩子函数

bind

元素第一次绑定时调用

inserted(常用)

元素从父节点插入时调用

update(常用)

被绑定元素所在的模板更新时调用，而不论绑定值是否变化.通过比较更新前后的绑定值，可以忽略不必要的模板更新

componentUpdated (基本不用)

被绑定元素所在模板完成一次更新周期时调用。

unbind (基本不用)

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

指令钩子函数中的参数

例子:

<div v-dir-name:arg.mod='name' ></div>

new Vue({
el: '#app',
data: {
name: 'Eric'
},
directives: {
dir-name: {

}
}
})

el

指令所绑定的元素 ‘

<div v-dir-name:arg.mod='name' ></div>

’

binding

name(指令名)—–>dir-name

value(绑定值)—–>Eric

oldValue(绑定的前一个值)

expression(绑定值的字符串形式)—–>name

modifiers(个包含修饰符的对象)—–>{mod:true}//暂时没发现有什么用。

arg(传给指令的参数)—–>arg

vnode (编译生成的虚拟节点)

oldVnode (上一个编译生成的虚拟节点)