1、使用场景
Vue中操作底层的DOM便是通过大量的vue指令，比如：v-html、v-if、v-show等等，因此：自定义指令主要解决的问题以及使用场景是对 DOM 元素进行底层操作的。
1.1、定义directive
directive指令是独立于组件之外的
Vue.directive('color',{
inserted(el,bind){
el.style.color = bind.value;
}
})
el：是指的添加自定义指令的那个DOM元素，而bind则是指的绑定的相关属性，通过bind.value可以获取到指令传入过来的值。
1.2、使用自定义指令
<div id="demo">
<h1 v-color="color.redColor">测试自定义指令</h1>
<h1 v-color="color.greenColor">测试自定义指令</h1>
</div>
data() {
return {
color: {
redColor: "red",
greenColor: "green",
},
};
},
成功生成自定义指令.png
1.2、和普通的vue指令一样进行更新
directive可以看做也是具有一个生命周期的，其中inserted便可看成是一个生命周期，他是在元素刚插入的时候触发，意味着也只会触发一次，当指令传入的变量的值数据发生了改变，那么需要进行对应的修改操作，则需要使用directive的update()生命周期的钩子去处理。
Vue.directive('color',{
inserted(el,bind){
el.style.color = bind.value;
},
update(el,bind){
el.style.color = bind.value;
}
})
点击进行修改传入的变量的值：
<h1 v-color="color.greenColor" @click="handleChange">测试自定义指令</h1>
methods: {
handleChange(){
this.color.greenColor = '#ccc';
}
},
修改变量的值.gif
