Vue自定义指令

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({}) 同级

钩子函数： 不需要主动调用的函数，在某个特定的场景下自动调用函数。

1. bind:只调用一次,指令第一次绑定到元素时调用。

2. update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前 （当数据变化时 dom更新时)。

3. inserted:被绑定元素插入父节点时调用 ,dom创建完成时触发 。

 

每个钩子函数都拥有两个形参

1. el:指令所绑定的元素,可以直接操作DOM ,就是谁调用自定义方法就绑定谁

2. 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没绑定的元素就无法使用此元素内的自定义函数名称