Vue.js 使用一種超集的 HTML 樣板語言。我們可以使用插值和指令。本文將解釋指令。
在Vue.js 模板和插值中，我們看到了如何在 Vue 模板中嵌入數據。
本文將解釋 Vue.js 在模板中提供的另一種技術：指令。
指令基本上就像是添加在模板內的 HTML 屬性。它們都以 v- 開頭，表示它們是 Vue 的特殊屬性。
讓我們逐一看一下每個 Vue 指令的詳細用法。
v-text
可以使用 v-text 指令來替代插值，它執行相同的工作：
<span v-text="name"></span>
v-once
你知道 {{ name }} 是綁定到組件數據的 name 屬性的。當你的組件數據中的 name 發生變化時，Vue 會在瀏覽器中更新該值。
除非使用 v-once 指令，它基本上就像是一個 HTML 屬性：
<span v-once>{{ name }}</span>
v-html
當你使用插值來打印數據屬性時，HTML 會被轉義。這是 Vue 自動保護免受 XSS 攻擊的一種很好的方式。
然而，有時你想要輸出 HTML 並讓瀏覽器解釋它。你可以使用 v-html 指令：
<span v-html="someHtml"></span>
v-bind
插值只在標籤內容中起作用，無法在屬性上使用。
屬性必須使用 v-bind：
<a v-bind:href="url">{{ linkText }}</a>
v-bind 如此常見，所以它還有一種簡略語法：
<a v-bind:href="url">{{ linkText }}</a>
<a :href="url">{{ linkText }}</a>
使用 v-model 雙向綁定
v-model 允許我們綁定表單輸入元素（例如），在用戶更改字段內容時更改 Vue 數據屬性：
<input v-model="message" placeholder="輸入一條消息">
<p>消息是：{{ message }}</p>
<select v-model="selected">
<option disabled value="">選擇一個水果</option>
<option>蘋果</option>
<option>香蕉</option>
<option>草莓</option>
</select>
<span>選擇的水果：{{ selected }}</span>
使用運算式
你可以在指令中使用任何 JavaScript 運算式：
<span v-text="'你好，' + name + '！'"></span>
<a v-bind:href="'https://' + domain + path">{{ linkText }}</a>
指令中使用的任何變量都引用相應的數據屬性。
條件語句
在指令內部，你可以使用三元運算符進行條件檢查，因為它是一個表達式：
<span v-text="name == Flavio ? '你好 Flavio！' : '你好' + name + '！'"></span>
還有專門的指令可供你執行更有組織的條件語句：v-if、v-else 和 v-else-if。
<p v-if="shouldShowThis">嘿！</p>
shouldShowThis 是包含在組件數據中的布林值。
循環
v-for 允許你渲染一個項目列表。與 v-bind 一起使用，可以設置列表中每個項目的屬性。
你可以對一個普通的數值數組進行迭代：
<template>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: ['汽車', '自行車', '狗']
}
}
}
</script>
或者對一個對象數組進行迭代：
<template>
<div>
<!-- 使用插值 -->
<ul>
<li v-for="todo in todos">{{ todo.title }}</li>
</ul>
<!-- 使用 v-text -->
<ul>
<li v-for="todo in todos" v-text="todo.title"></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
todos: [
{ id: 1, title: '做一些事情' },
{ id: 2, title: '做其他事情' }
]
}
}
}
</script>
v-for 可以通過以下方式提供索引：
<li v-for="(todo, index) in todos"></li>
事件
v-on 允許你監聽 DOM 事件，並在事件發生時觸發一個方法。這裡我們監聽點擊事件：
<template>
<a v-on:click="handleClick">點擊我！</a>
</template>
<script>
export default {
methods: {
handleClick: function() {
alert('測試')
}
}
}
</script>
你可以向任何事件傳遞參數：
<template>
<a v-on:click="handleClick('測試')">點擊我！</a>
</template>
<script>
export default {
methods: {
handleClick: function(value) {
alert(value)
}
}
}
</script>
並且可以在模板中直接放入一小段 JavaScript（單個表達式）：
<template>
<a v-on:click="counter = counter + 1">{{counter}}</a>
</template>
<script>
export default {
data: function() {
return {
counter: 0
}
}
}
</script>
click 只是一種事件。常見的事件是 submit，你可以使用 v-on:submit 進行綁定。
v-on 如此常見，因此它還有一種簡略語法 @：
<a v-on:click="handleClick">點擊我！</a>
<a @click="handleClick">點擊我！</a>
有關
v-on的更多詳細信息，請參見Vue 事件
顯示或隱藏
你可以選擇僅當 Vue 實例的特定屬性求值為 true 時，顯示 DOM 中的元素，使用 v-show：
<p v-show="isTrue">某物</p>
該元素仍然被插入到 DOM 中，但如果條件不滿足，它的 display 設置為 none。
事件指令修飾符
Vue 提供了一些可選的事件修飾符，你可以與 v-on 一起使用，它們可以自動在事件處理程序中執行某些操作，而不需要顯式編寫。
一個很好的例子是 .prevent，它自動在事件上調用 preventDefault()。
在這種情況下，表單不會導致頁面重新加載，這是默認行為：
<form v-on:submit.prevent="formSubmitted"></form>
其他修飾符包括 .stop、.capture、.self、.once、.passive，可以在官方文檔中詳細說明。
自定義指令
Vue 默認的指令已經可以讓你完成很多工作，但如果你想要，你可以始終添加新的自定義指令。
如果你對此感興趣，請閱讀https://vuejs.org/v2/guide/custom-directive.html以了解更多信息。