目錄
1. v-html：
雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。爲了輸出真正的 HTML，需要使用該指令。它使內容按普通 HTML 插入 - 不會作爲 Vue 模板進行編譯。
<!--這個 span 的內容將會被替換成爲屬性值 rawHtml-->
<span v-html="rawHtml"></span>
2. v-for ：
可以綁定數組的數據來渲染一個項目列表。
<!-- 1. 用 v-for 把一個數組對應爲一組元素。第一個參數爲被迭代的數組元素的別名，還支持一個可選的第二個參數，即當前項的索引。-->
<div v-for="item in items" :key="item.id">{{ item.message }}</div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
<!--
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo', id: 1 },
{ message: 'Bar', id: 2 }
]
}
-->
<!-- 2. 用 v-for 來遍歷一個對象的屬性。第一個參數爲被迭代的對象屬性值，也可以提供第二個的參數爲 property 名稱 (也就是鍵名)。還可以用第三個參數作爲索引。-->
<ul class="demo">
<li v-for="value in object">{{ value }}</li>
</ul>
<div v-for="(value, name) in object">{{ name }}: {{ value }}</div>
<div v-for="(value, name, index) in object">{{ index }}. {{ name }}: {{ value }}</div>
<!--
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
-->
<!-- 3. 可以利用帶有 v-for 的 <template> 來循環渲染一段包含多個元素的內容。-->
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用“就地更新”的策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每個元素，並且確保它們在每個索引位置正確渲染。
這個默認的模式是高效的，但是只適用於不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。爲了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要爲每項提供一個唯一 key 屬性。
當v-for和 v-if 一起使用時，v-for 的優先級比 v-if 更高。這意味着 v-if 將分別重複運行於每個 v-for 循環中。
3. v-if：
將根據後面表達式的值的真假來插入/移除元素。
<h1 v-if="awesome">Vue is awesome!</h1>
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
4. v-show：
用於根據條件展示元素。
<h1 v-show="ok">Hello!</h1>
與v-if的區別：
v-if是“真正”的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。v-if也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。- 而帶有
v-show的元素始終會被渲染並保留在 DOM 中。v-show只是簡單地切換元素的 CSS 屬性display。 v-if支持<template>元素，也支持v-else。v-show都不支持。- 一般來說，
v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在運行時條件很少改變，則使用v-if較好。
5. v-model：
它能輕鬆實現表單輸入和應用狀態之間的雙向數據綁定。
v-model 會忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將 Vue 實例的數據作爲數據來源。應該通過 JavaScript 在組件的 data 選項中聲明初始值。
v-model 在內部爲不同的輸入元素使用不同的屬性並拋出不同的事件：
- text 和 textarea 元素使用
value屬性和input事件； - checkbox 和 radio 使用
checked屬性和change事件； - select 字段將
value作爲 prop 並將change作爲事件。
<!-- 1. 文本 -->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<!-- 2. 多行文本 -->
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<!-- 3. 複選框 -->
<div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<!--
data: {
checkedNames: []
}
-->
<!-- 4. 單選按鈕 -->
<div >
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<!--
data: {
picked: ''
}
-->
<!-- 5. 選擇框 -->
<div >
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<!--
data: {
selected: ''
}
-->
<!-- 6. 多選時 (綁定到一個數組) -->
<div>
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
<!--
data: {
selected: []
}
-->
<!-- 7. 修飾符 -->
<!-- (1) 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg">
<!-- (2) 自動將用戶的輸入值轉爲數值類型 -->
<input v-model.number="age" type="number">
<!-- (3) 自動過濾用戶輸入的首尾空白字符 -->
<input v-model.trim="msg">
<!-- 8. 值綁定 -->
<!-- (1)當選中時，vm.pick === vm.a -->
<input type="radio" v-model="pick" v-bind:value="a">
<!-- (2) 當選中時:vm.toggle === 'yes', 當沒有選中時,vm.toggle === 'no' -->
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
<!-- (3)當選中時, typeof vm.selected => 'object', vm.selected.number => 123 -->
<select v-model="selected">
<!-- 內聯對象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
6. v-bind：
綁定元素 attribute。
<!-- 1. 完整語法 -->
<a v-bind:href="url">...</a>
<button v-bind:disabled="isButtonDisabled">Button</button>
<!-- 2. 內聯字符串拼接 -->
<div v-bind:id="'list-' + id"></div>
<img :src="'/path/to/images/' + fileName">
<!-- 3. 縮寫 -->
<a :href="url">...</a>
<!-- 4. 動態參數 (2.6.0+) -->
<a v-bind:[attributeName]="url"> ... </a>
<!-- 5. 動態參數的縮寫 (2.6.0+) -->
<a :[attributeName]="url"> ... </a>
<!-- 6. class 綁定 -->
<div :class="classObject"></div>
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<div v-bind:class="[activeClass, errorClass]"></div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!--
data: {
classObject: {
active: true,
'text-danger': false
},
isActive: true,
hasError: false,
activeClass: 'active',
errorClass: 'text-danger'
}
-->
<!-- 7. style 綁定 -->
<div :style="styleObject"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!--
data: {
activeColor: 'red',
fontSize: 30
styleObject: {
color: 'red',
fontSize: '13px'
}
}
-->
<!-- 8. 綁定一個有屬性的對象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 9. 通過 prop 修飾符綁定 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>
<!-- 10. prop 綁定。“prop”必須在 my-component 中聲明。-->
<my-component :prop="someThing"></my-component>
<!-- 11. 通過 $props 將父組件的 props 一起傳給子組件 -->
<child-component v-bind="$props"></child-component>
7. v-on ：
指令添加一個事件監聽器，通過它調用在 Vue 實例中定義的方法
<!-- 1. 完整語法 -->
<a v-on:click="doSomething">...</a>
<button v-on:click="counter += 1">Add 1</button>
<!-- 2. 內聯語句 -->
<button v-on:click="doSomething('hello', $event)"></button>
<!-- 3. 縮寫 -->
<a @click="doSomething">...</a>
<!-- 4. 動態參數 (2.6.0+) -->
<a v-on:[eventName]="doSomething"> ... </a>
<!-- 5. 動態參數的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
<!-- 6. 對象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
<!-- 7. 事件修飾符 -->
<!-- (1)停止冒泡 -->
<button @click.stop="doSomething"></button>
<!-- (2)阻止默認行爲 -->
<button @click.prevent="doSomething"></button>
<!-- (3)阻止默認行爲，沒有表達式 -->
<form @submit.prevent></form>
<!-- (4)串聯修飾符 -->
<button @click.stop.prevent="doSomething"></button>
<!-- (5)鍵修飾符，鍵別名 -->
<input @keyup.enter="doSomething">
<!-- (6)鍵修飾符，鍵代碼 -->
<input @keyup.13="doSomething">
<!-- (7)點擊回調只會觸發一次 -->
<button v-on:click.once="doSomething"></button>
8. v-once ：
通過該指令，只能執行一次性地插值，當數據改變時，插值處的內容不會更新。
<span>Message: {{ msg }}</span>
<span v-once>這個將不會改變: {{ msg }}</span>
詳細見： Vue官方文檔 -指令