这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战
指令是Vue.js 中一个重要的特性，主要提供了一种机制将数据的变化映射为DOM 行为。
那什么叫数据的变化映射为DOM 行为？前文中阐述过Vue.js 是通过数据驱动的，所以我们
不会直接去修改DOM 结构，不会出现类似于$('ul').append('<li>one</li>') 这样的操作。当数
据变化时，指令会依据设定好的操作对DOM 进行修改，这样就可以只关注数据的变化，而不
用去管理DOM 的变化和状态，使得逻辑更加清晰，可维护性更好。
Vue.js 本身就提供了大量的内置指令来进行对DOM 的操作，我们也可以开发自定义指 令。本章主要介绍部分常见指令的使用及场景以及自定义指令的开发和指令相关的参数。
v-bind
v-bind 主要用于动态绑定DOM 元素属性（attribute），即元素属性实际的值是由vm 实例中的data 属性提供的
<img v-bind:src='avatar' />
//简写
<img :src='avatar' />。
v-model
v-model 的指令对表单元素进行双向数据绑定，在修改表单元素值的 同时，实例vm 中对应的属性值也同时更新，反之亦然。 该指令主要用于input、select、textarea 标签中，具有lazy、number、debounce（2.0 废除）、 trim（2.0 新增）这些修饰符。
<input type="checkbox" v-model="checked" />
v-if/v-else/v-show
v-if 和v-else 的作用是根据数据值来判断是否输出该DOM 元素，以及包含的子元素。
<div v-if="yes">yes</div>
如果当前vm 实例中包含data.yes = true，则模板引擎将会编译这个DOM 节点，输出
<div>yes</div>。
与v-if 不同的是，v-show 元素的使用会渲染并保持在DOM 中。v-show 只是切换元素 的css 属性display。
v-if 和v-show 的主要区别就在于，v-if 在条件为false 的情况下并不进行模板的编译，而v-show 则会在模板编译好之后将元素隐藏掉。v-if 的切换消耗要比v-show 高，但初始条件为false 的情况下，v-if 的初始渲染要 稍快。
v-for
v-for 指令主要用于列表渲染，将根据接收到数组重复渲染v-for 绑定到的DOM 元素及 内部的子元素，并且可以通过设置别名的方式，获取数组内数据渲染到节点中
<el-option v-for="item in ProAllcontractor" :key="item.user_id" :label="item.user_name" :value="item.user_name"></el-option>
v-HTML
v-HTML, 参数类型为String， 作用为更新元素的innerHTML，接受的字符串不会进行 编译等操作，按普通HTML 处理。同v-text 类似，{{{}}} 插值也会编译为节点的v-HTML 指令，v-HTML 也需要绑定在某个元素上且能避免编译前闪现问题。
textData:'上传资料'
<el-button style="width:100%;" v-html="textData"></el-button>
v-on
通过v-on 可以绑定实例选项属性methods 中的方法作为事件的处理器，v-on: 后参数 接受所有的原生事件名称。
Vue.js 也提供了v-on 的缩写形式， 我们可以将模板中的内容改写为<el-button @click="resetForm('ruleForm')">重置</el-button>，这两句语句是等价的。
除了直接绑定methods 函数外，v-on 也支持内联JavaScript 语句，但仅限一个语句
<el-button @click="resetForm('ruleForm')">重置</el-button>
