Vue 自定义指令

一、为什么要用自定义指令

 在vue中v-model、v-html、v-text、v-show这些都是vue已经给我们封装好的指令我们直接用就行，当这些指令不满足我们需求的时候，那我们可不可以自己造一个指令？

二、全局定义

 在全局中定义需要把代码写到项目中main.js文件中。通过Vue.directive()方法定义指令。该方法包括两个参数，指令名和一个js对象。在全局中定义的指令可以在项目任意组件中使用。
 其中对象包括三个方法:
  **bind()**方法，初始化时执行吗，并且只执行一次。由于此时元素还没有渲染到页面中，dom是虚拟dom，无法操作对dom元素绑定事件函数等。
  **inserted()**方法，元素渲染到页面后执行，只调用一次。一般在这个方法里操作dom对象。此dom为原生的dom对象，用jquery方法操作需要引入jquery文件或者npm指令下载。
  **update()**方法，页面更新后触发，比如：v-model绑定更新数据后触发此方法。
  这三个方法中有同样的两个参数，第一个参数el是dom元素，第二个参数binding为该包含该指令的一些属性的对象，其中属性value为绑定指令时传递的参数。

	<div v-color="'red'">自定义指令</div>
    <div v-color="color">自定义指令</div>	//参数color是我在组件定义的颜色，属性值为green
    <input v-color="color" v-model="text">

	Vue.directive('color', {
    bind(el, binding) {
        el.style.color = binding.value;
    },
    inserted(el) {
        el.onkeydown=function (){
            console.log(1);
        }
    },
    update(el) {
        console.log(el);
    }
})

 bind方法中，第一行传递参数为red，字体颜色变红，第二行传递参数为color，color为我自定义的属性，值为green，所以颜色为绿色。
 inserted方法中绑定了键盘按下事件，所以在输入框输入时会打印内容1。
 update方法中，当页面更新时打印1，我为input进行了双向绑定，所以输入内容时即为页面更新，输出el参数，也就是上面所说的dom元素。可以看到，控制台中打印了dom元素，把bind方法中赋予的color属性以内联样式展现了出来。

三、私有定义

 顾名思义，私有定义的方式将自定义指令定义在当前组件中，而非全局中。此时也只有当前组件中能够使用私有指令。写法如下：
 在与data()，method平级的地方声明directives对象，在此对象中有两种私有定义方式：
    1.指令名(){}，这种写法相当于指令中只有一个bind方法。//color1
    2.指令名:{},将指令写成对象的形式，里面可以写上述全局中的三种方法。//color2
    元素绑定这两种私有指令的方式与使用方法同全局。