Vue自定义指令
实例hc:
<div id='app'>
<input type="text" v-test>
<button @click="isShow=!isShow">按钮</button>
<p v-show="isShow">文字</p>
</div>
全局自定义指令
语法:Vue.directive("自定义名字",{钩子函数})
Vue.directive与New Vue({}) 同级
钩子函数: 不需要主动调用的函数,在某个特定的场景下自动调用函数。
-
bind:只调用一次,指令第一次绑定到元素时调用。
-
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前 (当数据变化时 dom更新时)。
-
inserted:被绑定元素插入父节点时调用 ,dom创建完成时触发 。
每个钩子函数都拥有两个形参
el:指令所绑定的元素,可以直接操作DOM ,就是谁调用自定义方法就绑定谁
binding:一个对象,即为=后的 "对象"
Vue.directive('changeshow',{
bind(el,binging){
//此时的el绑定的就是:<div>
//binging即为:v-changeshow="isShow"的"isShow"
el.style.display=binging.value ? 'block' :'none';
},
update(el, binging) {
el.style.color="red";
}})
new Vue({
el:'#app',
data:{
isShow:true //设置一个值用以控制开关
}})
局部自定义指令
注意,局部自定义指令只能存在于当前el绑定的元素当中
//语法:
new Vue({
el: '#app',
data: {isShow:true //设置一个值用以控制开关},
directives: {
"自定义函数名称": {
bind(el, binging) {},
update(el, binging) {}
}
!!因为是局部的方法,所以Vue中el没绑定的元素就无法使用此元素内的自定义函数名称