自定义指令
一.自定义指令的使用1) 可以使用Vue.directive( dir_name , {} ) 来定义全局自定义指令2) 也可以使用 directives{ dir_name : {} } 来定义局部自定义指令二.构造函数1) bind只调用一次,当指令第一次绑定在元素上时.用来做一次性初始化操作.2) inserted当绑定元素已插入到父节点时调用.也就是说 必...
·
一.自定义指令的使用
1) 可以使用Vue.directive( dir_name , {} ) 来定义全局自定义指令
2) 也可以使用 directives{ dir_name : {} } 来定义局部自定义指令
二.构造函数
1) bind
只调用一次, 当指令第一次绑定在元素上时.
用来做一次性初始化操作.
2) inserted
当绑定元素已插入到父节点时调用.
也就是说 必定存在父节点.
但是 它 及它的父节点 未必存在文档中.
3) update
在包含该组件的VNode更新后调用该函数.
可能在其子级更新前调用.
指令的值可能已更改,可能未更改.最好通过判断新旧值来过滤掉不必要的操作.
4) componentUpdated
在包含该组件的VNode 以及 其子节点的VNodes已更新之后 调用.
5) unbind
指定从元素上解绑时,调用一次.
局部的自定义指令,只能在当前组件的模板中去用
三.钩子函数的参数
1)el
绑定了该指令的元素.
可以直接操作DOM元素.
2)binding ( 包含以下属性 )
name
刨除’v-'前缀的指令名
3)value
传递给指令的值. e.g. v-s="1+1", value就是2
4)oldValue
旧值 , 只在 钩子函数 update 以及 componentUpdated 中可用.
无论值是否改变都可用
5)expression
表达式的字符串形式.
6)arg
传递给指令的参数 . e.g. v-s:foo , arg就是 foo
7)modifiers
包含修饰符的对象.e.g. v-s.a.b 意味着 modifiers 为 {a : true , b:true}
8)vnode
vue编译器提供的虚拟节点对象. 详见 VNode API
9)oldVnode
之前的虚拟节点对象. 只在钩子函数 update 和 componentUpdated 中可用.
四.实例
// 这些参数中, 除了 el 以外 , 其他参数都看做是只读参数.即不要修改它们.
// 如果 需要跨钩子 使用它们, 建议使用 dataset 来实现.
// 指令的参数的值 可以是动态的:
<p v-track:left="[dyLeft]"> some text </p>
data(){
return {
dyLeft : 500
}
}
Vue.direction('aabb',{
inserted(el.obj){
console.log(obj.value)
el,style.color=obj.value
},
update(el.obj){
console.log(a)
}
})
var VM = new Vue({
el:'#box',
data:{
color1:'yellow'
}
})
更多推荐
已为社区贡献1条内容
所有评论(0)