理解 Vue.js 的指令（Directives）：高效操作 HTML 的利器

更新日期： 2024 年 11 月 16 日

Vue.js 提供了一個強大且直觀的功能——指令（Directives）。

指令是內建於 Vue 的自定義 HTML 屬性，可以輕鬆實現許多複雜、常見的前端操作，極大地提升了開發效率。

本文將介紹 Vue.js 中幾個重要的指令，包括 v-if、v-for、v-model 和 v-on:click，並解答一些關於它們的常見疑問。

v-if：條件渲染

功能與語法

v-if 指令用於根據條件決定是否渲染某個 HTML 元素。

當條件為 true 時，元素會被渲染；為 false 時，元素從 DOM 中被移除。

範例

<button v-if="userIsLoggedIn">Log Out</button>
<button v-if="!userIsLoggedIn">Log In</button>

在此範例中：

• 當 userIsLoggedIn 為 true 時，顯示「Log Out」按鈕。
• 當 userIsLoggedIn 為 false 時，顯示「Log In」按鈕。

常見問題解答

問題：v-if 判斷的條件是什麼？

是的，v-if 的條件通常是 Vue 應用中的 data 屬性。

在上述範例中，userIsLoggedIn 是 data 中的一個屬性，其值應為布林值。

這是因為 v-if 的條件需要能夠正確解析為 true 或 false，以決定是否渲染元素。

v-for：列表渲染

功能與語法

v-for 用於遍歷一個陣列或物件，並基於其中的每個項目動態生成 HTML 元素。

範例

<ul>
  <li v-for="todo in todoList">{{ todo }}</li>
</ul>

此範例中：

• todoList 是 Vue 應用 data 中的一個陣列。
• v-for 遍歷 todoList 的每個項目，為每個項目生成一個 li 元素。

常見問題解答

問題：v-for 的擺放位置有限制嗎？

是的，v-for 應放置於需要重複渲染的目標元素上。

因此，下列寫法無法正確執行：

<ul v-for="todo in todoList">
  <li>{{ todo }}</li>
</ul>

原因是：v-for 會導致多個 ul 被渲染，而非單一的 ul 中包含多個 li。正確的方式是將 v-for 放在 li 上。

正確用法：v-for 放在需要重複渲染的目標元素上

範例

<ul>
  <li v-for="todo in todoList">{{ todo }}</li>
</ul>

說明

• v-for 被放置在 li 元素上，表示 li 元素將根據 todoList 中的每個項目動態生成。
• ul 是固定的，只會生成一個。
• 每個 li 元素代表一個 todoList 項目。

生成的 HTML

假設 todoList = ['todo 1', 'todo 2', 'todo 3', 'todo 4']，生成的 HTML 如下：

<ul>
  <li>todo 1</li>
  <li>todo 2</li>
  <li>todo 3</li>
  <li>todo 4</li>
</ul>

結果分析

• 整個列表結構被包含在一個 ul 中。
• 每個 li 是 v-for 循環生成的項目。

錯誤用法：v-for 放在上層容器元素上

範例

<ul v-for="todo in todoList">
  <li>{{ todo }}</li>
</ul>

說明

• v-for 被放置在 ul 元素上，表示 ul 元素將根據 todoList 中的每個項目動態生成。
• 每個 todo 生成一個單獨的 ul，而不是將所有項目包含在同一個 ul 中。

生成的 HTML

假設 todoList = ['todo 1', 'todo 2', 'todo 3', 'todo 4']，生成的 HTML 如下：

<ul>
  <li>todo 1</li>
</ul>
<ul>
  <li>todo 2</li>
</ul>
<ul>
  <li>todo 3</li>
</ul>
<ul>
  <li>todo 4</li>
</ul>

結果分析

• 每個 todo 生成一個單獨的 ul，不符合常見的 HTML 列表結構。
• 這樣的結果可能導致樣式錯亂或與預期不符。

v-model：雙向數據綁定

功能與語法

v-model 用於實現表單字段與 Vue 應用數據的雙向綁定，當用戶輸入值時，數據會自動更新。

範例

<input v-model="username" />

此範例中：

• username 是 Vue 應用 data 中的屬性。
• 當用戶修改輸入框的內容時，username 的值會自動更新。

常見問題解答

問題：v-model 通常結合哪些元素使用？

v-model 通常與表單元素（如 input、textarea、select）結合使用。

然而，它也可以用於其他自定義組件，當組件內部實現了 v-model 的必要邏輯時。

問題：非表單元素中如何使用 v-model？

在非表單元素中，v-model 常用於與自定義組件配合，用於管理組件的值。

例如：

<custom-input v-model="customValue"></custom-input>

此時，custom-input 組件內部需要實現 v-model 的邏輯。

v-on:click：事件處理

功能與語法

v-on:click 用於監聽點擊事件，並執行指定的 JavaScript 代碼或方法。

範例

<button v-on:click="handleClick">Click Me</button>

此範例中，handleClick 是 Vue 應用的 methods 中的一個函數。

點擊按鈕時，handleClick 方法將被執行。

常見問題解答

問題：v-on:click 的值應該是什麼？

v-on:click 的值通常是一個 JavaScript 函數的名稱，例如上述範例中的 handleClick。

也可以直接在屬性內寫入表達式，例如：

<button v-on:click="count += 1">Increase Count</button>

此寫法在按下按鈕時，直接增加 count 的值。

結語

Vue.js 的指令通過簡單直觀的語法，大幅減少了繁瑣的 JavaScript 操作。

其中，v-if 實現條件渲染，v-for 動態生成列表，v-model 實現雙向數據綁定，v-on:click 提供了便捷的事件處理方式。

這些指令讓開發者能夠以更少的代碼實現更複雜的功能，是 Vue.js 框架的一大亮點。

理解並熟練使用這些指令，將讓您在前端開發中如虎添翼。