一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

自定义指令

1. 什么是自定义指令

vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。

注意：自定义局部指令中内部不能出现大写字母（第一个字母可以大写，如：Obgcolors，中间大写不行，如：obgColors就不可以）；

2. 自定义指令的分类

vue 中的自定义指令分为两类，分别是：

私有自定义指令
全局自定义指令

3. 私有自定义指令

在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：

<!-- 我们使用自定义指令的时候，在指令的前面需要加上一个 v- ,也就是说：比如 v-color 他的指令实际上是 color -->
<p v-color>自定义指令</p>

<script>
export default {
  // 私有自定义指令的节点
  directives:{
    // 定义名为 color 的指令，指向一个配置对象
    color:{
      // 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
      // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
      bind(el){
        el.style.color='blue'
      }
    }
  }
}
</script>

4. 为自定义指令动态绑定参数值

当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
bind 函数里面的这两个参数虽然都是形参，名字可以任意命名，但是我们最好是按照官方的标准来，元素使用 el , 第二参数（接收指令的参数值对象）使用 binding
形参中的 el 表示当前指令所绑定到的那个 DOM 对象
通过 binding 获取指令的参数值，需要注意的是这个后面的这个 binding 参数，代表的是一个对象，
binding.exxpression 是表达式，其内容是我们在指令后面所写的全部内容(包括最外层的双引号)
binding.value 是我们真正能够使用的值，是指令后面双引号里面的内容（不包括最外层的双引号）

<p v-color>自定义指令1</p>
<!-- 默认黑色-该指令没有起作用 -->
<p v-color="color">自定义指令2</p>
<!-- 蓝色--我们定义的 data 里面的 coloe 的值 -->
<p v-color="'red'">自定义指令3</p>
<!-- 红色--相当于直接赋值；尤其要注意直接给值的时候，值要加上双引号，否则会被认为是 data 里面的属性，然后去data 里面找，找不到就会报错 -->

====================分割线==========================

<script>
export default {
  data(){
    return{
      //单引号  
      color:'blue'
    }
  },
  directives:{
    // 定义名为 color 的指令，指向一个配置对象
    color:{
      bind(el,binding){
        el.style.color=binding.value
      }
    }
  }
}
</script>

5. update 函数

bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。 update 函数会在每次 DOM 更新时被调用，但是在指令对一次绑定到元素上面的时候并不会被调用。所以 bind 函数和 update 函数我们都是配套使用的。(＾ω＾)

就比如说我们用下面的这种方式来改变颜色值的话，就是不会生效的，虽然我们在调试工具里面看到的 color 的值确实已经被更改，但是并没有被渲染到其他元素的上面，也就是因为 bind 这个渲染改颜色值的函数只是在第一次绑定到元素时调用，其他时候不会调用！！!

<button @click="color='green'">改变 color 的颜色值</button>

所以我们就是需要使用这个 update 函数（该函数的用法和 bind 函数基本一致）了

// 私有自定义指令的节点
directives: {
    // 定义名为 color 的指令，指向一个配置对象
    color: {
      bind(el, binding) {
        console.log("触发了 v-color 的 bind 函数");
        el.style.color = binding.value;
      },
      update(el, binding) {
        console.log("触发了 v-color 的 bind 函数");
        el.style.color = binding.value;
      },
    },
},

6. 函数简写

如果 bind 和update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：

// 私有自定义指令的节点
directives: {
    // 在bind 和 update 的时候，会触发相同的业务逻辑
    color(el, binding) {
        console.log("触发了 v-color 的 bind 函数");
        el.style.color = binding.value;
    }
},

7. 全局自定义指令

全局共享的自定义指令需要通过 “Vue.directive()” 在 main.js 中进行声明（和声明全局的过滤器的写法差不多）

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 全局自定义指令
//完整写法：
// Vue.directive('color', {
//     bind(el, binding) {
//         el.style.color = binding.value
//     },
//     update(el, binding) {
//         el.style.color = binding.value
//     }
// })

// 可简写为
Vue.directive('color', function(el, binding) {
    el.style.color = binding.value
})

new Vue({
    render: h => h(App),
}).$mount('#app')

叭叭小知识：

我们一般在开发中使用过滤器和自定义指令的时候，一般都是使用全局注册的方式，以实现代码的复用。
main.js 里面的一个小知识：

main.js 里面有一行语句 Vue.config.productionTip = false ；该行语句的作用是：

我们在 web 端调试的时候，Vue的窗口会不会看到一个提示信息---我们现在是开发模式 development，发布的时候，需要将其改为生产模式 production ；

Vue.config.productionTip 的默认值是 TRUE 即我们可以看到提示信息（也就是说这一行语句是可以删除掉的，没有太大影响）

对上面的三个知识的学习小结：

① 能够掌握 keep-alive 元素的基本使用

keep-alive 标签、include 属性

② 能够掌握插槽的基本用

slot 标签、具名插槽、作用域插槽、后备内容

③ 能够知道如何自定义指令

私有自定义指令 directives: { }
全局自定义指令 Vue.directive()

Vue2.x-3.x从入门到精通完整详细学习笔记day05-2