知识预备：自定义指令中的钩子函数
bind：只调用一次，指令第一次绑定到元素的时候调用 （一般在修改style时使用）inserted：被绑定的元素节点插入到dom树中时调用（一般在修改dom时使用）update：所在组件的Vnode更新时调用，但孩子Vnode可能还没有更新componentUpdate：所在组件的Vnode及孩子的Vnode全部更新时调用unbind：只调用一次，指令与元素解绑的时候调用一般就用前两个就行了
知识预备：自定义指令中的钩子函数中的参数
//例子bind:function(el,binding)
el:指令绑定的对象，可以用来直接操作dombinding是一个对象
binding:{name:指令名value：指令绑定的值 参数值 "1+1"==>2expression：绑定值的字符串形式 "1+1"==>'1+1'}
还有其他参数类型 不常用就不写了 到这里没看懂没关系 看后面的例子就明白了
1.自定义全局指令
声明：Vue.directive(‘name’,{bind:function(){}})
参数1：字符串 自定义指令的名称参数2：对象 绑定的钩子函数
<script>import Vue from 'vue'Vue.directive('focus', {bind: function (el) {console.log('调用全局自定义指令----bind')},inserted: function (el) {el.focus()console.log('调用全局自定义指令----inserted')}})export default {}</script>
使用：在标签中写 v-指令的名字
<div>调用全局自定义指令</div><input type="text" v-model="keywords" v-focus>
2.自定义私有指令
声明：
<script>export default {name: 'directivePage',directives: {'fontWeight': {bind: function (el) {el.style.fontWeight = 500}}},data () {return {keyword: ''}},methods: {}}</script>
调用：
<div v-fontWeight>调用私有自定义指令</div>
3.自定义指令中传递参数
以自定义全局指令为例子
声明：
参数存在于binding对象中 见知识预备中
Vue.directive('color', {bind: function (el, binding) {el.style.color = binding.value}})
调用：
传递参数以字符串的形式
<div v-color="'blue'">调用全局自定义指令color</div>
效果：
4.自定义指令的简写形式
大多数情况下，我们可能想在bind和update钩子上做重复动作，并且不想关心它的钩子函数时 即不想关心绑定哪个钩子函数
// 不想关心它的钩子函数可以采用简写的方式Vue.directive('color', (el, binding) => {el.style.color = binding.value})
