vue自定义指令

       如果一个组件的效果非常简单，但是用的地方特别多，假如我们有100个组件都需要依赖Loading这个效果，那么我们每一次使用这个效果的时候都要做三件事：1. 导入这个组件；2. 注册组件；3. 在组件中使用这个Loading。这样显得特别麻烦。
       那么希望能不用组件的形式，而是希望用指令的形式v-loading = isLoading。如下所示：

<template>
	<div v-loading="isLoading" class="loading-container"></div>
</template>

export default {
	data() {
    	return {
     	 isLoading: true,
    	};
 	 },
}

当isLoading为true的时候就显示，为false的时候就不显示。

       然而现在还不能使用这个指令，因为vue里面并不存在这个指令。那么怎么能够让他识别这个指令呢？就是下面提到的自定义指令。

定义指令

       自定义指令不是必须的，而是它可以给我们提供额外的选择，可以更加舒适的书写vue代码，使用一些常见的功能。
       要做自定义指令，首先要定义一个指令，就和定义组件时一样的。定义指令分为全局定义和局部定义。

全局定义

全局定义就是，整个项目每个组件都可以用。
全局定义直接使用vue的构造函数里面的静态方法vue.directive
这里定义了两个指令：mydirec1,mydirec2

// 指令名称为：mydirec1
Vue.directive('mydirec1', {
  // 指令配置
})

// 指令名称为：mydirec2
Vue.directive('mydirec2', {
  // 指令配置
})

之后所有的组件均可使用mydirec1和mydirec2指令

<template>
  <!-- 某个组件代码 -->
  <div>
    <MyComp v-mydirec1="js表达式" />
    <div v-mydirec2="js表达式">
      ...
    </div>
    <img v-mydirec1="js表达式" />
  </div>
</template>

注：指令后面跟的都是js表达式
       全局注册确实使用起来很方便，但是全局注册跟组件的全局注册是一样的，会导致打包结果里面默认会有这个东西。如果它非常常见，那可以使用全局注册；但是有时候并不是每个组件会使用，并不希望打包结果默认有这个，而是希望某个组件用到这个指令的时候，打包结果才会有，这个时候可以使用局部定义。

局部定义

局部定义是指在某个组件中定义指令，和局部注册组件类似。

定义的指令仅在该组件中有效。

<template>
  <!-- 某个组件代码 -->
  <div>
    <MyComp v-mydirec1="js表达式" />
    <div v-mydirec2="js表达式">
      ...
      1. 在某个代码里面使用了这两个指令，而它们两个并不是全局注册的，
      只希望在这个组件里面使用，别的组件用不了；
    </div>
    <img v-mydirec1="js表达式" />
  </div>
</template>

<script>

2. 可以在这个组件进行配置，配置directives 和 components是一样的，
export default {
  // 定义指令
 
  directives: {
    // 指令名称：mydirec1
    mydirec1: {
      // 指令配置
    },
    // 指令名称：mydirec2
    mydirec2: {
      // 指令配置
    }
  }
}
</script>

以上是指令的定义，接下来重点是指令的配置对象。

指令的配置对象

在指令中，其实配置的是一些钩子函数
自定义指令中共有5个钩子函数。

常用的钩子函数：

// 指令配置对象
{
  bind(){
    // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  },
  inserted(){
    // 被绑定元素插入父节点时调用。
  },
  update(){
    // 所在组件的 VNode 更新时调用
  }
}

查看更多的钩子函数

触发了函数后它会做什么呢？
其实在它每次调用函数的时候，实际上给它传递了两个参数 (其实有四个参数，只不过后两个不长用) ，每个钩子函数都有这两个参数，

// 指令配置对象
{
  bind(el, binding){
    // el 是被绑定元素对应的真实DOM
    // binding 是一个对象，描述了指令中提供的信息
  }
}

binding对象

v-mydirective:a.b.c="2 > 1",这是指令的完整写法。
       冒号后面的a是指令参数，如同注册事件：@click，这是平时语法糖的书写方法，完整的写法是：v-on:click指令名称是on，指令参数是click；指令参数只有一个，修饰符可以有多个；如果觉得只是指令还不够，还需要额外的信息，那么可以利用参数、修饰符进行提供额外信息。参数和修饰符可写可不写，取决于自己写指令的时候，是否需要。
       后面的 .b.c叫做指令的修饰符。

这些信息会传递到binding里面是一个对象，会提供一些关键的信息:

1. 首先指令的名字会传递到 banding 的 name 里面: name:"mydirec";
2. 指令参数会传递到arg里面，变成一个字符串：arg:"a";
3. 后面的修饰符会传递到modifiers: {b: true, c: true, d: true};
4. 后面的js表达式会算出值，传递到value里面：value:true;

binding还有别的属性，但是一般用不到：查看更多binding对象的属性

binding对象包含指令的全部信息。