先来了解一下vue的内置指令（v-开头的是指令）：v-if、v-else、v-show、v-for、v-once、v-model、 v-on（@）、v-bind（:）、v-text、v-html等。
自定义指令directives，和内置指令的区别，directives主要是需要对普通dom元素进行操作时，就需要用到自定义指令。 （vue使用自定义指令操作底层dom，原生js用document.getElementById()来操作真实dom。vue的指令相比原生提高了性能，它选择操控内存vDom虚拟对象，建立数据和视图之间的联系，数据驱动去更改视图渲染。 ）
directives的用法：
1.注册一个全局自定义指令 第一个参数：指令名称（起个名，不带v-）。第二个参数是个对象，提供了自定义钩子函数inserted(下面还有其他的函数)，el是这个钩子函数的参数(下面还有其他的参数)，当这个指令绑定了元素的时候，代表拿到这个元素的真实DOM了，然后给他添加方法。
<div id="box"> <input id="input" type="text" v-focus> </div> //全局注册自定义指令钩子：v-focus Vue.directive("focus",{ //当被绑定元素插入到父节点的时候，就会触发inserted钩子函数 inserted(el){ el.focus() } })2.注册一个局部自定义指令 特点:局部自定义指令directives，加s
new Vue({ el:"#box", directives:{ focus:{ inserted(el){ el.focus() } } } })自定义指令第二个参数是个对象，里面提供了几种自定义钩子函数。
bind：只调用一次，指令第一次绑定到元素时调用。用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted：被绑定元素插入父节点时调用（父节点存在即可调用）。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次， 指令与元素解绑时调用。
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性(常用value参数，解析传来的数据)
name：指令名，不包含v-的前缀；value：指令的绑定值；例如：v-my-directive=“1+1”，value的值是2，binding.value拿到解析变量后的数据；oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；expression：绑定值的字符串形式；例如：v-my-directive=“1+1”，expression的值是’1+1’；arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 ‘foo’；modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{‘a’:true,‘b’:true}vnode：Vue编译的生成虚拟节点；
oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。 简单案例
<div id="app"> <!--一个双引号括起来的是变量"red"，潜逃一个单引号的是字符串"'pink'"，变量没定义会报错--> <p v-color="'pink'">pink</p> <p v-color="red">pink</p> <p v-color="orange">我是橙色</p> {{orange}} <!--这里如果用bind绑定，那么单击后颜色不改变，所以数据改变更新，调用update--> <button @click="orange='green'">点击更改橙色</button> </div> Vue.directive("color",{ bind(el,binding){ //注意了，bind只是初始化调用一次 el.style.background = binding.value }, //点击改变时，数据改变更新，调用update update(el,binding){ el.style.background = binding.value } }) new Vue({ el: '#app', data:{ red:"red", orange:"orange" } })简写逻辑相同的钩子函数
Vue.directive('color', function (el, binding) { el.style.backgroundColor = binding.value })