全局自定义指令
Vue.directive(‘参数名称’,{})定义全局指令，它有两个参数
参数一：指令名称，注意在定义的时候，不要加v-前缀，但是在调用的时候，必须加v-前缀
参数二、参数2是一个对象，这个对象身上有一些指令相关的函数（也就是下面介绍的钩子函数），这些函数可以在特定的阶段，执行相关的操作。
<div id="app">
<input type="text" v-focus>
</div>
<script>
//这里就用到上边所说的钩子函数了，在这里不做详解，在下面的钩子函数以及传参做详解
Vue.directive('focus',{
bind:function(){//每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
},
inserted:function(el){// inserted 表示元素 插入到DOM中的时候，会执行此函数，触发一次
el.focus(); //注意：在每一个函数中，第一个参数，永远是 el ，表示被绑定了指令的 那个元素 ，这个el参数，是一个原生JS的DOM对象
},
updated:function(){// 每当VNode 更新的时候，会执行 updated函数，可能会触发多次
}
})
var vm = new Vue({
el:'#app',
data:{},
methods:{}
})
</script>
局部自定义指令
局部自定义指令，有两个条件（指令名称和指令对象）
<div id="app>
<h5 v-color>我是局部自定义指令</h5>
</div>
<script>
var vm = new Vue({
el:'#app',
date:{},
methods:{},
directives:{
'color':{//给字体设置颜色
bind:function(el){ //这个function() 中还有第二个参数 binding ，这里不做介绍，在下边钩子函数参数中介绍
el.style.color="red";
}
}
}
})
</script>
注意：全局用的是directive指令，局部用的是directives
钩子函数
- bind：只调用一次，每当指令绑到元素上的时候，会立即执行这个bind函数
在上边自动获取焦点的案例中，在元素刚绑定指令的时候，还没有插到DOM中去，这个时候调用focus方法没有作用，因为一个元素，只有插入DOM之后，才能获取焦点，所以这个函数不能获取焦点
样式设置：只要通过指令绑定给了元素，不管这个元素有没有插入到页面中，这个元素一定有一个内联样式，将来元素肯定会渲染显示到页面中去，这个时候，浏览器的渲染引擎必然会解析样式，然后应用这个样式
注意：一般和样式操作有关的，一般都可以在bind函数中执行
-
inserted：表示元素插入到DOM中的时候，会执行inserted函数，触发一次（例如：自动获取焦点）
-
updated ： 当VNode 更新的时候，会执行 updated 函数，可能会触发多次
注：和 JS 行为有关系的操作，最好在 inserted 中去执行，防止 JS 行为不生效。
-
updated ： 当VNode 更新的时候，会执行 updated 函数，可能会触发多次
-
componentUpdated ： 指令所在组件的VNode 及其子 VNode 全部更新后调用。
-
upbind： 只调用一次，指令与元素解绑时调用
Vue钩子函数传参详解
1、el：指令绑定的元素，规定的也是每个钩子函数中的第一个参数，永远不会改变，这个el参数，是一个原生的JS的DOM对象，
2、binding：第二个参数是一个对象，包含以下参数
- name：指令名，不包含v-前缀
- value：指令绑定的值
- expression：字符串形式的指令表达式
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- arg：传给指令的参数，可选
- modifiers： 一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为{ foo: true, bar: true }
3、vnode：Vue编译形成的虚拟节点 4、oldVnode： 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
