vue2自定义指令使用

如果vue自带的指定不能满足开发需求时，定义自定义的指令。自定义指令一般分为组件私有自定义指令和项目全局自定义指令。

一：局部自定义指令：

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

如需求，需要给将<span>局部自定义指令</span>中的文本颜色设置为blue。

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

 <span v-color="color"> 局部自定义指令 </span>

data(){

    return:{

        color:'blue',    //定义颜色，在标签中的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;
        }，

 
    }
}

二：全局自定义指令：

在全局入口文件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指令。如： <span v-color="color"> 全局自定义指令 </span>