vue2自定义指令方式

当vue自带的指定不能满足我们开发需求时，我们可以根据自己的需求，定义自定义的指令。

自定义指令一般分为组件私有自定义指令和项目全局自定义指令。它们的定义方式类似于filters过滤器的的定义。

一：私有自定义指令：（只能在定义的组件内使用）

在组件中的directives中定义一个指令，通过bing和update函数实现该指令需要表达的逻辑。

如需求，需要给将

自定义指令

中的文本颜色设置为red。

我们可以定义一个v-color指令：

自定义指令



data(){
    return:{
        color:'red',    //定义颜色，在标签中的v-color中调用，实现需求
    }
},

directives:{
    color:{    //命名自定义节点名称
        bind(el,binding){     //初次加载组件时调bind函数处理绑定v-color的DOm节点
            el.style.color=binding.value;
        }，
        update(el,binding){    //当data中color数据发生改变时，update函数实现更新Dom节点
            el.style.color=binding.value;
        }，

    }
}

当bind函数和update函数体中的逻辑代码相同时，可以省略两者函数名，将color自定义指令名作为函数名实现简化，如下代码：

directives:{
    color:(el,binding){     //当bind和update函数体中的代码逻辑一致，简写的方式
            el.style.color=binding.value;
    }，
        
}

二：全局自定义指令：

在全局入口文件main.js中定义全局自定义指令，一次定义，可以在项目任何组件中使用。

还是上面将p标签中的文本颜色设置为red为例：

在main.js中，代码如下：

Vue.directive('color',{
    bind(el,binding){       //初次加载时调用
        el.style.color=binding.value;
    },
    update(el,binding){      //data数据变化重新加载DOM时调用
        el.style.color=binding.value;
    }
})

在任意组件中可调用v-color指令。如：

自定义指令

以上在main.js中定义的全局自定义指令中的bind和update函数的函数体一致，因此可以简写为：

Vue.directive('color',(el,binding)=>{       //bind和update函数体逻辑代码一致时简写方式
        el.style.color=binding.value;
    },
})