“这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战”
背景：vue中我们有很多内置指令，用于操作DOM，进行数据绑定。但有时候我们需要对DOM进行底层操作，于是用到了自定义指令
一，vue定义的常见指令
首先，我们来介绍一下vue的一些常见的指令吧。
1，v-show 与v-if 这两个指定都是来控制元素的显示和隐藏的，他们后面都是跟着一个布尔值变量，通过 true 与 false 来控制是否显示，来看一下他们一下的区别吧：
v-show ：是通过css控制元素 display：none 来控制元素的显示和隐藏；dom树上有内容，不显示，适合频繁切换。
v-if ：是通过操作dom元素来控制元素的显示和隐藏的；dom树上无内容。
2，v-for 是用来循环遍历数组和对象的，这里v-for的常规使用方法，我就不说了，说一下场景使用中，遇到的问题：v-for数据绑定数组值改变不会更新视图，解决方法如下：
a, 通过数组的 length 属性方法改变数组时，不能触发视图更新，解决方法：
根据vue的官方文档说明：Vue 包含一组观察数组的变异方法，所以它们将会触发视图更新。 这些方法如下：push(); pop(); shift(); unshift(); splice(); sort(); reverse()；所以当我们想要页面实时更新的话就必须使用以上方法；通过splice方法改变数组。绑定点击事件时将v-for索引传给点击函数。
b, 通过数组的索引去改变数组时不能触发视图更新，解决方法：
**
//因为vue无法监听到复杂数据内部数值变化，所以要使用：
this.$set( target, key, value )； //使用 vm.$set实例方法，这也是全局 Vue.set方法的别名，$set可以触发更新视图
Vue.set( target, key, value )； //通过Vue.set方法，$set可以触发更新视图
注：调用方法：Vue.set( target, key, value )； target：要更改的数据源(可以是对象或者数组)； key：要更改的具体数据；value ：重新赋的值；
3，v-html：更新元素的innerHTML；
4，v-text：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
5，v-on：绑定事件监听器。事件类型由参数决定，有简写 @ ，例如：@click
6，v-bind：动态的绑定一个或多个属性，或者一个组件prop到表达式，有简写‘’ ：‘’，例如：‘：class’
7，v-model：表单元素或者组件上创建双向绑定
8，v-once:只渲染元素和组件一次。
9，v-else：表示否则（与编程语言中的else是同样的意思），一般都是结合 v-if 来使用
二， 如何创建 vue 自定义指令
2.1，创建定义全局指令
Vue.directive(id, definition) 方法注册一个全局自定义指令；两个参数，id：创建的指令名，在声明时候不需要加 v-，但是在html元素上使用时候，必须要加 v-；definition：这是一个对象，里面有inserted（）函数，函数有 el 这个参数.，el 这个参数表示了绑定这个指令的 DOM元素；
找到文件中，main.js 文件，在里面定义全局指令
**
Vue.directive('focus', {// 当绑定元素插入到 DOM 中。
inserted: function (el) {// 聚焦元素
el.focus()
}
})
或者你也可以重新命名一个定义指令的js文件directive.js,再把这个文件引入到main.js文件中
2.2，创建定义局部指令
**
<template>
<div>
<!-- 注意它调用的方式 -->
<input v-model="dir1" v-focus="dir1" v-color="'red'" />
</div>
</template>
<script>
export default {
data() {
return {
dir1: ""
};
},
directives: {// 这里定义指令的
focus: {// 指令的定义
inserted: function(el) {
el.focus();
}
},
color: {// 为元素设置指定的字体颜色
bind(el, binding) {
el.style.color = binding.value;
}
}
}
};
</script>
2.2，自定义指令的函数
说到创建自定义指令，就不得不说它的函数了
bind(){},//只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted(){},//被绑定元素插入父节点时调用(父节点存在即可调用，不必存在于 document 中)
update(){},//在绑定到元素后立即以初始值第一次调用，然后每次example2变化都会调用update
componentUpdated(){},//被绑定元素所在模板完成一次更新周期时调用
unbind(){},// 只调用一次，指令与元素解绑时调用。
再来看一下函数中，所绑定的一些参数的说明：
-
el：指令所绑定的元素，可以用来直接操作 DOM。 -
binding：一个对象，包含以下属性：name：指令名，不包括v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
-
vnode：Vue 编译生成的虚拟节点。移步 [VNode API] 来了解更多详情。 -
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
