下面直接切入主题，一一列举Vue的9个指令：
-
v-text（设置标签的文本值）
通常情况下v-text可以简写为{{}}；无论内容是什么，v-text只会解析成文本。 -
v-html（设置元素的innerHTML）
v-html与v-text的区别是，若要解析html结构，就用v-html。 -
v-on（给元素绑定事件）
v-on指令是给元素绑定事件，所以事件名就不需要on了，指令可以简写为@，注意绑定事件的方法在methods属性中，下面列举一个语法模板：
<body>
<div id="app">
<input type="button" value="绑定事件" v-on:click="event">
<!--或者可以写成下面的简写形式-->
<input type="button" value="绑定事件" @click="event">
</div>
<script type="text/javascript">
var a = new Vue({
el:"#app",
methods:{
event:function(){
alert("事件绑定完成了!");
}
}
})
</script>
</body>
-
v-on补充（传递自定义参数，事件修饰符）
事件后面跟上 .修饰符可以对事件进行限制，例如@keyup.enter。 -
v-if指令（切换元素的显示和隐藏）
根据表达式的真假，可以切换元素的显示和隐藏（操作dom元素）。 -
v-show
v-show和v-if很像，但是如果频繁切换的情况下就用v-show。 -
v-bind（设置元素的属性）
可以简写为 “ ：”。 -
v-for（根据数据生成列表结构）
语法是 (item,index) in 数据，小模版：
<body>
<div id="app">
<ul>
<!--用v-for遍历数组-->
<li v-for="item in arr">
蔬菜：{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var a = new Vue({
el:"#app",
data:{
arr:["苹果","草莓","西瓜"]
}
})
</script>
</body>
- v-model获取和设置表单元素的值
v-model是用来获取和设置表单元素的值，可以实现双向数据绑定，双向的意思是（表单元素的值和绑定的数据），也就是说表单元素的值和绑定的数据只要有一方发生改变，另一方也会发生更新。