下面直接切入主題，一一列舉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是用來獲取和設置表單元素的值，可以實現雙向數據綁定，雙向的意思是（表單元素的值和綁定的數據），也就是說表單元素的值和綁定的數據只要有一方發生改變，另一方也會發生更新。