Vue Directives
Vue 指令是帶有 v- 字首的特殊 HTML 屬性，它們為 HTML 標籤提供額外的功能。
Vue 指令連線到 Vue 例項，以建立動態和響應式的使用者介面。
使用 Vue，建立響應式頁面比傳統的 JavaScript 方法更簡單，需要的程式碼也更少。
不同的 Vue 指令
本教程中使用的不同 Vue 指令列在下面。
| 指令 | 詳情 |
|---|---|
v-bind |
將 HTML 標籤中的一個屬性連線到 Vue 例項內部的資料變數。 |
v-if |
根據條件建立 HTML 標籤。指令 v-else-if 和 v-else 與 v-if 指令一起使用。 |
v-show |
根據條件指定 HTML 元素是否可見。 |
v-for |
使用 for 迴圈根據 Vue 例項中的陣列建立標籤列表。 |
v-on |
將 HTML 標籤上的事件連線到 JavaScript 表示式或 Vue 例項方法。我們還可以透過使用**事件修飾符**更精確地定義頁面如何響應特定事件。 |
v-model |
與 <form>、<input> 和 <button> 等標籤一起在 HTML 表單中使用。在輸入元素和 Vue 例項資料屬性之間建立雙向繫結。 |
示例：v-bind 指令
瀏覽器從 Vue 例項中查詢要連線到 <div> 元素的類。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.pinkBG {
background-color: lightpink;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="vueClass"></div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
vueClass: "pinkBG"
}
}
})
app.mount('#app')
</script>
</body>
</html>
自己動手試一試 »
注意：上面的示例可以用更簡單的普通 JavaScript 程式碼實現，但請耐心等待。Vue 的真正優勢將在後面的示例中體現，屆時我們將建立響應式頁面。
在 W3Schools 學習 Vue
在 W3Schools.com 學習 Vue 時，您可以使用我們的“自己動手嘗試”工具，該工具同時顯示程式碼和結果。這將使您更容易理解我們接下來的每一個部分。
點選“下一頁”繼續教程。
