背景分析
传统的html并不支持表达式、分支语句、循环语句等结构的定义，为了弥补其不足很多前端框架，模板引擎通过在html元素中添加自定义属性，然后底层再借助解析引擎对html自定义属性进行处理，以这样的方式来增强html的功能。
Vue中的常用指令
v-bind
在html中假如希望元素的属性值随程序内容的发生而变化，可以借助v-bind或:代替，其基本语法如：
<元素 v-bind:属性名="变量或js表达式">也可以采用其简化形式，其基本语法如：
<元素 :属性名="变量或js表达式">案例分析：
hello
v-show
v-show为一个专门控制元素的显示隐藏的特殊指令，其基本语法为：
<元素 v-show="bool类型的变量或返回bool类型的js表达式">当Vue对象扫描到v-show时，就会立刻执行""中的变量或js表达式,
如果变量或js表达式的值为true，则什么也不干，元素保持原样显示。如果变量或js表达式的值为false，则new Vue()自动为当前元素添加display:none。
示例关键代码如下：
×
v-if 和 v-else
v-if 和 v-else 是在html实现分支控制，二选一的一种实现方式，在使用时，v-if和v-else对应的的两个元素必须紧挨着写！中间不能插入其他元素，其基本语法为：
<元素1 v-if="boolean类型的变量或js表达式">
<元素2 v-else>
示例关键代码如下：
v-else-if
v-else-if专门和v-if搭配使用，控制多个元素多选一显示的特殊的指令。其基本语法为：
<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
<元素3 v-else-if="条件3">
... ...
<元素n v-else>注意，v-if和v-else-if和v-else之间必须连着写，不能插入其他元素。
示例关键代码如下：
优秀
良好
及格
及格
v-for
v-for是一个专门用于根据数组内容反复生成多个相同结构的元素的特殊指令。其语法为：
<要反复生成的元素 v-for="(当前元素值, 当前位置) of 数组">示例关键代码如下：
-
{{i+1}} - {{t}}
v-for还可以遍历对象属性，例如：
-
{{key}} : {{value}}
v-for 还可以进行计数，例如：
- {{i}}
v-on
v-on 是一个专门绑定事件处理函数的指令，其基本语法为：
<元素 v-on:事件名="事件处理函数名()">v-on 也可以使用@符号代替，其基本语法结构为：
<元素 @事件名="事件处理函数名()
如果事件处理函数不需要传入实参值，则()也可省略,例如：
<元素 @事件名="事件处理函数名">凡是在页面中定义的事件处理函数，都要在new Vue()中的methods成员内添加对应的函数实体。
示例关键代码如下：
d1
d2
v-text
v-text是可代替{{}}绑定元素内容的特殊指令,用于设置元素内部的文本内容，而且可以防止因网络延迟短暂显示{{}}的现象。其语法为：
<元素 v-text="变量或js表达式"> 示例关键代码如下：
v-model
v-model 是用于实现双向绑定的指令，既能将程序中的变化，自动更新到页面上(model->view)，又能将页面上发生的变化，更新回程序中的变量中(view->model),其基本语法为：
<表单元素 v-model:value="变量">示例关键代码如下：
select元素的双向绑定
一个select下包含多个option元素。所有备选值value，都分布在每个option上。但是每个备选值value也是写死的。用户每次选择不同的option时，其实select元素会将选中的option的value值，修改到select的value属性上。其语法为：
示例代码如下：
![]()
总结(Summary)
本小节，主要是对vue中常用的的一些指令元素进行了分析，在理解和应用的过程中可以参考本文档和官方文档再结合实践进行熟练应用。