1 常用指令 v-if指令 v-show指令 v-else指令 v-for指令 v-bind指令 v-model v-on指令 v-text指令 1.1 v-if是條件渲染指令，它根據表達式的真假來刪除和插入元素，它的基本語法如下： expression是一個返回bool值的表達式，表達式可以是一個 ...
1 常用指令
- v-if指令
- v-show指令
- v-else指令
- v-for指令
- v-bind指令
- v-model
- v-on指令
- v-text指令
1.1 v-if是條件渲染指令，它根據表達式的真假來刪除和插入元素，它的基本語法如下：
v-if="expression"
expression是一個返回bool值的表達式，表達式可以是一個bool屬性，也可以是一個返回bool的運算式。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>
顯示結果如下、
註意：v-if指令是根據條件表達式的值來執行元素的插入或者刪除行為。
1.2 v-for指令
v-for指令基於一個數組渲染一個列表，它和JavaScript的遍歷語法相似：
v-for="item in items"
items是一個數組，item是當前被遍歷的數組元素。
示例代碼：
<body>
<div id="app">
<table style="width: 400px; height: 600px;" border="1" cellspacing="0">
<thead>
<tr>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td align="center"> {{item.name}}</td>
<td> {{item.age}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
items:[{name:'well',age:'20'},{name:'good',age:'19'},{name:'nice',age:'18'},{name:'ok',age:'17'},]
}
})
</script>
1.3 v-bind 指令可以在其名稱後面帶一個參數，中間放一個冒號隔開，這個參數通常是HTML元素的特性（attribute），例如：v-bind:class
v-bind:argument="expression"
1.4 v-model
v-model（表單元素設置了之後會忽略掉value，checked，selected），常用在表單 <input> 及 <textarea>
讓表單元素和數據實現雙向綁定（映射關係）
示例代碼
<div id="app"> <p v-text="message"> </p> <input type="text" v-model="message"> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ message:"nice to meet you" } }) </script>
1.5 v-on 指令用於給監聽DOM事件，它的用語法和v-bind是類似的，例如監聽<a>元素的點擊事件：
<a v-on:click="doSomething">
有兩種形式調用方法：綁定一個方法（讓事件指向方法的引用），或者使用內聯語句。
Greet按鈕將它的單擊事件直接綁定到greet()方法，而Hi按鈕則是調用say()方法。
在事件處理程式中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令尾碼來表示的。
.stop.prevent.capture.self.once.passive
<!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件監聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div>
Vue.js為最常用的兩個指令v-bind和v-on提供了縮寫方式。v-bind指令可以縮寫為一個冒號，v-on指令可以縮寫為@符號。
<!--完整語法--> <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a> <!--縮寫語法--> <a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a> <!--完整語法--> <button v-on:click="greet">Greet</button> <!--縮寫語法--> <button @click="greet">Greet</button>
1.6 v-text指令主要是防止頁面首次載入時 {{}} 出現在頁面上
v-text="expresstion"
參考文獻：
官網：https://cn.vuejs.org/v2/guide/
