vue中常用v-表示指令，下面總結一下常用的指令有哪些：
插入文本:v-text
相當於元素的innerText屬性，必須是雙標簽
插入HMTL:v-html
相當於元素的innerHTML屬性
循環:v-for
v-for的使用，除了item屬性，還有一些其他輔助屬性。假設你現在循環的對象名字為students:
- 如果students是數組，還有index屬性，如v-for="（item,index） in students";
- 如果students是對象，還有value,key屬性，如v-for="（value,key,index） in students";
條件渲染
第一種：if ... else if ...else型
是否插入元素
第二種：v-show
是否隱藏元素
屬性綁定:v-bind
v-bind:屬性名="常量 || 變量名"，簡寫形式——:屬性名="常量 || 變量名"
如：
<div v-bind:屬性名="變量"></div> //可以簡寫成 <div :屬性名="變量"></div> //如果要賦值常量，需要給常量用單引號包起來，如 <div :屬性名=" '常量' "></div>
雙向綁定:v-model
所謂的雙向綁定，就是你在視圖層里面改變了值，vue里面對應的值也會改變。只能給具備value屬性的元素進行雙向數據綁定。
綁定事件:v-on
v-on:click = "方法名 || 直接改變 vue 內部變量"，簡寫形式——@click = "方法名 || 直接改變 vue 內部變量"
<div v-on:click=" num = 1 "></div> //可以簡寫成 <div @click=" num = 1 "></div>
可以直接更改vue內部的變量，如上面的num，是我在data里面定義的一個屬性。
上述所有指令的例子代碼：
<!DOCTYPE html> <html lang="en"> <head> <title>vue常用指令</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script> <style type="text/css"> .even{background-color: #f2f2f2} </style> </head> <body> <div id="app"></div> <script type="text/javascript"> new Vue({ el:'#app', template:` <div> <h1 v-text="myTxt"></h1> <hr/> <div v-html="myHtml"></div> <hr/> <button v-if=" num == 1 ">顯示1</button> <button v-else-if=" num == 2 ">顯示2</button> <button v-else=" num == 3 ">顯示3</button> <hr/> <button v-show="isShow">我默認顯示</button> <hr/> <div v-bind:data-name=" myName " :data-sex=" '女' ">通過v-bind來給屬性賦值</div> <hr/> <button v-on:click=" num = 1">改變num值為1</button> <hr/> <input v-model="country" placeholder="試着輸入中國"> <div v-if=" country == '中國' ">中國夢，我的夢！</div> <hr> <ul> <li v-for="(item,index) in newsList" :class="index%2==0 ? 'even' : ''"> <p>{{item.title}}<p> 發布時間：<span>{{item.time}}<span> </li> </ul> <hr> <div v-for="(value,key) in students"> {{key}}:{{value}} <br/> </div> </div> `, data:{ myTxt:'我是v-text的值', myHtml:'<p>我是HTML</p>', num:2,//改變num的值看效果 isShow:true, myName:'Sheryl', count:1, country:'', newsList:[ {title:"新聞標題一",time:"2018-08-31"}, {title:"新聞標題二",time:"2018-08-31"}, {title:"新聞標題三",time:"2018-08-31"} ], students:{ 'name':'Sheryl', 'sex':'女', 'age':25 } }, methods:{ changeCount(action) { if (action === 'minus') { if (this.count > 1) { this.count--; } else { alert("不能再減了") } } else { this.count++ } }, } }) </script> </body> </html>