1. 什么是自定义指令

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

2. 自定义指令的分类

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

3. 私有自定义指令

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

4. 使用自定义指令

在使用自定义指令时，需要加上v- 前缀。示例代码如下：

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

在 template 结构中使用自定义指令时，可以通过等号（=）的方式，为当前指令动态绑定参数值：

6. 通过 binding 获取指令的参数值

在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值：

7. update 函数

bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时bind 函数不会被触发。 update 函 数会在每次 DOM 更新时被调用。示例代码如下：

8. 函数简写

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

9. 全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下：

 10. vue自定义指令的代码示例

  // 私有自定义指令的节点
  directives: {
    // 定义名为 color 的指令，指向一个配置对象
    /* color: {
      // 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
      // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
      bind(el, binding) {
        console.log('触发了 v-color 的 bind 函数')
        el.style.color = binding.value
      },
      // 在 DOM 更新的时候，会触发 update 函数
      update(el, binding) {
        console.log('触发了 v-color 的 update 函数')
        el.style.color = binding.value
      }
    } */
    color(el, binding) {
      el.style.color = binding.value
    }
  }

 11. Main.js文件中 Vue.config.productionTip 意义

 提示开发模式和发布（生产）模式，本行代码无意义

Vue.config.productionTip = false

值为 True 或 False 表示能否看到如下的提示

等于true（或默认不写）的显示（如上图），会提示处在的模式

 等于False的显示（如上图），没有提示处于什么模式

总结: 

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

<keep-alive> 标签、 include 属性

② 能够掌握插槽的基本用

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

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

私有自定义指 令 directives: { }

全局自定义指 令 Vue.directive()

 

一、前言
我们了解的vue指令有： v-model,v-show,v-for等，除了这些指令，我们也可以实现自己的自定义指令。在vue中代码的抽取和复用主要是通过组件，如果我们想要对DOM元素进行底层操作，可以通过自定义组件来完成。
二、自定义指令的分类
自定义局部指令:在options api选项中的directives中设置。
自定义全局指令:在app的directive方法。
三、input框聚焦案例
我们需要实现的功能是：input选择框当我们打开页面是，就实现自动聚焦的功能。我们存在三种实现方法。
一、普通实现

通过ref拿到input标签，然后使用生命周期函数的回调，执行input标签的focus的操作
二、自定义局部组件实现

options api中存在directives选项，然后在其中设置指令。
三、自定义全局组件实现

在app中存在directive，可以在上面设置全局指令。
四、指令的生命周期
created:在绑定元素的attribute或者事件监听器之前被使用
beforeMount：当指令第一次绑定元素，并且挂载父组件之前被使用。
mounted:在绑定元素的组件被挂载后调用。
beforeUpdate:在指令绑定的组件更新其Vnode之前被调用
updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用
beforeUnmount:在卸载绑定元素的父组件之前调用
unmounted:当指令与元素解除绑定且父组件已卸载时，只调用一次。
五、生命周期的参数

el:表示当前的元素
bindings:可以从中取出一些参数的内容
vnode:可以获取当前的vnode节点。
preVnode:可以获取之前的vnode节点。
六、自定义指令的练习
我们一般从服务器端获取一些时间戳，但是我们一般在页面展示时，采用的是时间的其他格式，在vue2中我们一般使用过滤器(过滤器需要注意的是：在vue3中已经删除)或者使用计算属性或者methods方法，此时我们还可以使用自定义指令来完成。

七、错误指出

如上图所示，此时将字符串绑定到bindings中，如果不绑定，如果多次使用format-time自定义指令,全局变量formateString就会被最后一次使用的更改。

简介:除了核心功能默认内置指令(v-model和v-show)，Vue也允许注册自定义指令。在Vue2中，代码复用和抽象的主要形式是组件，然而，有的情况下，你仍需要对普通DOM元素进行底层操作，这时候就需要用到自定义指令。

一、全局自定义指令

① 在main.js文件里定义自定义指令Vue.directive，第一个参数自定义指令名，第二个是钩子函数。

② 在页面标签上写自定义指令即可

一、自定义指令钩子函数详解。

⑴ bind:第一次绑定到元素时调用

⑵ unbind:解绑时调用，也只调用一次

⑶ insert:绑定元素插入父节点时调用

⑷ update:所在节点及子节点所有虚拟dom更新时调用

二、钩子函数的参数

一   el : 指令所绑定的元素，可以用来直接操作DOM。

二、binding : 一个对象，包含以下 键值对

⑴ name：指令名，不包括 v- 前缀。

⑵ value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

⑶ oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

⑷ expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

⑸ arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

⑹ modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

三、vnode   Vue编译生产的虚拟节点

四、oldVnode : 是一个虚拟节点，仅在 update 和componentUpdated钩子中可用。

二、局部自定义指令。

① 在js里定义   directive:{'自定义指令名':{钩子函数:function(el,binding,vnode){    逻辑处理  }}}