/

Vue.js 指令

Vue.js 指令

Vue.js 使用一種超集的 HTML 樣板語言。我們可以使用插值和指令。本文將解釋指令。

在Vue.js 模板和插值中，我們看到了如何在 Vue 模板中嵌入數據。

本文將解釋 Vue.js 在模板中提供的另一種技術：指令。

指令基本上就像是添加在模板內的 HTML 屬性。它們都以 v- 開頭，表示它們是 Vue 的特殊屬性。

讓我們逐一看一下每個 Vue 指令的詳細用法。

v-text

可以使用 v-text 指令來替代插值，它執行相同的工作：

1
<span v-text="name"></span>

v-once

你知道 {{ name }} 是綁定到組件數據的 name 屬性的。當你的組件數據中的 name 發生變化時，Vue 會在瀏覽器中更新該值。

除非使用 v-once 指令，它基本上就像是一個 HTML 屬性：

1
<span v-once>{{ name }}</span>

v-html

當你使用插值來打印數據屬性時，HTML 會被轉義。這是 Vue 自動保護免受 XSS 攻擊的一種很好的方式。

然而，有時你想要輸出 HTML 並讓瀏覽器解釋它。你可以使用 v-html 指令：

1
<span v-html="someHtml"></span>

v-bind

插值只在標籤內容中起作用，無法在屬性上使用。

屬性必須使用 v-bind：

1
<a v-bind:href="url">{{ linkText }}</a>

v-bind 如此常見，所以它還有一種簡略語法：

1
2
<a v-bind:href="url">{{ linkText }}</a>
<a :href="url">{{ linkText }}</a>

使用 v-model 雙向綁定

v-model 允許我們綁定表單輸入元素（例如），在用戶更改字段內容時更改 Vue 數據屬性：

1
2
<input v-model="message" placeholder="輸入一條消息">
<p>消息是：{{ message }}</p>
1
2
3
4
5
6
7
<select v-model="selected">
 <option disabled value="">選擇一個水果</option>
 <option>蘋果</option>
 <option>香蕉</option>
 <option>草莓</option>
</select>
<span>選擇的水果：{{ selected }}</span>

使用運算式

你可以在指令中使用任何 JavaScript 運算式：

1
<span v-text="'你好，' + name + '！'"></span>
1
<a v-bind:href="'https://' + domain + path">{{ linkText }}</a>

指令中使用的任何變量都引用相應的數據屬性。

條件語句

在指令內部，你可以使用三元運算符進行條件檢查，因為它是一個表達式：

1
<span v-text="name == Flavio ? '你好 Flavio！' : '你好' + name + '！'"></span>

還有專門的指令可供你執行更有組織的條件語句：v-if、v-else 和 v-else-if。

1
<p v-if="shouldShowThis">嘿！</p>

shouldShowThis 是包含在組件數據中的布林值。

循環

v-for 允許你渲染一個項目列表。與 v-bind 一起使用，可以設置列表中每個項目的屬性。

你可以對一個普通的數值數組進行迭代：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
 <ul>
 <li v-for="item in items">{{ item }}</li>
 </ul>
</template>

<script>
export default {
 data() {
 return {
 items: ['汽車', '自行車', '狗']
 }
 }
}
</script>

或者對一個對象數組進行迭代：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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 可以通過以下方式提供索引：

1
<li v-for="(todo, index) in todos"></li>

事件

v-on 允許你監聽 DOM 事件，並在事件發生時觸發一個方法。這裡我們監聽點擊事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
 <a v-on:click="handleClick">點擊我！</a>
</template>

<script>
export default {
 methods: {
 handleClick: function() {
 alert('測試')
 }
 }
}
</script>

你可以向任何事件傳遞參數：

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
 <a v-on:click="handleClick('測試')">點擊我！</a>
</template>

<script>
export default {
 methods: {
 handleClick: function(value) {
 alert(value)
 }
 }
}
</script>

並且可以在模板中直接放入一小段 JavaScript（單個表達式）：

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 如此常見，因此它還有一種簡略語法 @：

1
2
<a v-on:click="handleClick">點擊我！</a>
<a @click="handleClick">點擊我！</a>

有關 v-on 的更多詳細信息，請參見Vue 事件

顯示或隱藏

你可以選擇僅當 Vue 實例的特定屬性求值為 true 時，顯示 DOM 中的元素，使用 v-show：

1
<p v-show="isTrue">某物</p>

該元素仍然被插入到 DOM 中，但如果條件不滿足，它的 display 設置為 none。

事件指令修飾符

Vue 提供了一些可選的事件修飾符，你可以與 v-on 一起使用，它們可以自動在事件處理程序中執行某些操作，而不需要顯式編寫。

一個很好的例子是 .prevent，它自動在事件上調用 preventDefault()。

在這種情況下，表單不會導致頁面重新加載，這是默認行為：

1
<form v-on:submit.prevent="formSubmitted"></form>

其他修飾符包括 .stop、.capture、.self、.once、.passive，可以在官方文檔中詳細說明。

自定義指令

Vue 默認的指令已經可以讓你完成很多工作，但如果你想要，你可以始終添加新的自定義指令。

如果你對此感興趣，請閱讀https://vuejs.org/v2/guide/custom-directive.html以了解更多信息。

tags: [“Vue.js”, “directives”, “v-text”, “v-once”, “v-html”, “v-bind”, “v-model”, “expressions”, “conditionals”, “loops”, “events”, “show or hide”, “event directive modifiers”, “custom directives”]