昨天介紹完了 Vue 模板語法中的插值語法及過濾器的使用，它們是 Vue 中非常重要的一部分。不過，還有另一種重要的模板語法，那就是指令。接下來兩天會和大家介紹幾種常用的 Vue 指令，那我們開始吧！

Vue Directives

Vue.js 的指令(Directives)是一種特殊的標記，用於向 DOM 元素添加特殊的行為或功能

以下為幾個常見的 Vue 指令，會在這兩天一一和大家介紹：

• v-bind
• v-on
• v-model
• v-for
• v-if
• v-else
• v-show

v-bind

用於將元素的屬性與 Vue 實例的數據進行綁定，實現動態屬性。

<img v-bind:src="imageSource">

由此範例來看，當imageSource的資料變更時，src也會跟著變

通常習慣上會將v-bind省略，直接簡寫成:，如下：

<img :src="imageSource">

v-bind也可以用來綁定class屬性，如以下範例：

<script>
export default {
  data() {
    return {
      titleClass: 'title'
    }
  }
}
</script>

<template>
  <h1 :class="title">Make me red</h1>
</template>

<style>
.title {
  color: red;
}
</style>

範例來源：https://cn.vuejs.org/tutorial/#step-3

v-on

用於監聽 DOM 事件，當事件觸發時執行指定的方法。可以將它用於任何 DOM 元素上，例如按鈕、輸入框等。

<button v-on:click="confirm">確認</button>

以此範例為例，當點擊確認按鈕時，會觸發confirm函式

習慣上也會將v-on簡寫為@，如下：

<button @click="confirm">確認</button>

v-model

如果有看前幾篇的讀者應該還有印象，先前介紹過的雙向繫結就是使用到 v-model 這個指令。

v-model 指令用於實現雙向數據綁定，通常用於表單元素（如 input、textarea、select）。當使用 v-model 綁定到表單元素時，它會自動將表單輸入的值同步到 Vue 實例的數據，並且當數據變化時，也會同步更新表單元素的值。

<input v-model="text">
<p>{{ text }}</p>

結語

今天我們學習了 v-bind、v-on 及 v-model 的用法。v-bind 讓我們能夠實現動態屬性綁定，使元素的屬性與 Vue 實例的數據保持同步。v-on 則用於監聽 DOM 事件，讓我們可以對事件觸發時執行特定的方法。而 v-model 則實現了雙向數據綁定，特別適用於表單元素的操作。明天也會繼續介紹其他常見的指令，敬請期待明天的內容吧！