目录
一、私有自定义指令
私有自定义指令：指的是定义在组件内部的自定义指令，只能在本组件内使用，其他组件无法使用
语法：
自定义指令，定义在 directives 节点下。其中 el 指向 被绑定的 原生DOM 对象
binding 参数用来接收用户传递过来的值
看下面代码：
定义了一个自定义指令：v-color
<template>
<p v-color="color">你好vue</p>
</template>
<script>
export default {
data() {
return {
color: "red"
}
},
directives: {
color: {
// el 指向 被绑定 的 原生DOM 对象
// binding 参数用来接收用户传递过来的值
bind(el, binding) {
el.style.color = binding.value
}
}
}
}
</script>
注意：bind() 函数，只有在第一次被绑定的时候会执行！这时候需要用到 update（）函数来监听当DOM元素发生改变的时候执行
update() 函数 ， 在DOM元素的属性值发生改变的时候会被触发
directives: {
color: {
bind(el, binding) {
el.style.color = binding.value
},
upadte(el, binding) {
el.style.color = binding.value
}
}
}
bind() 和 update() 函数可以简写：
前提：如果bind和 update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式
directives: {
color(el, binding) {
el.style.color = binding.value
}
}
二、全局自定义指令
全局共享的自定义指令需要通过 'Vue.directive()' 进行声明，写在main.js文件中，示例代码如下：
// 全局自定义指令,color是自定义指令的名字
/* Vue.directive('color', {
bind(el, binding) {
el.style.color = binding.value
},
update(el, binding) {
el.style.color = binding.value
},
}) */
下面是简写，前提是bind 和 update 函数中逻辑完全相同才可以：
Vue.directive('color', function(el, binding) {
el.style.color = binding.value
})