Vue 3 的模板語法是構建用戶界面的核心之一，它使得開發者可以使用簡單的 HTML 語法來定義動態的 UI。在這篇文章中，我們將深入探討如何使用 Vue 3 的模板系統創建強大的動態 UI。

基礎的模板語法

Vue 3 的模板語法本質上是擴展了標準的 HTML，並添加了數據綁定和指令支持，讓 UI 可以響應數據的變化。最常用的特性包括：

1.插值：使用 {{}} 來綁定數據到 DOM 元素中。

<p>{{ message }}</p>

在這裡，message 是 Vue 3 中的響應式數據。

2.指令：Vue 提供了一系列的指令來擴展 HTML 的功能，如 v-if、v-for 和 v-bind。

• v-if 用於條件渲染：

<p v-if="isVisible">This is visible</p>

• v-for 用於列表渲染：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

• v-bind 用於綁定 HTML 屬性：

<img :src="imageUrl" alt="Image">

3. 事件處裡

使用 v-on 或 @ 來監聽 DOM 事件並綁定到 Vue 的方法上。

<button @click="handleClick">Click me</button>

動態 Class 和 Style 綁定

動態 Class 和 Style 綁定是 Vue 模板系統的一個重要特性，它可以根據數據的變化動態地改變元素的外觀。

• 動態綁定 Class：

<div :class="{ active: isActive }"></div>

• 動態綁定Style:

<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

條件渲染和列表渲染

條件渲染 (v-if) 和列表渲染 (v-for) 是 Vue 3 模板語法的兩個重要組件，讓我們可以根據數據動態地顯示或隱藏元素，或者根據數據集合動態生成元素列表。

Vue 3 的模板語法讓我們可以輕鬆地構建動態的、數據驅動的 UI。透過響應式數據綁定和強大的指令支持，我們能夠將靜態的 HTML 轉化為充滿活力的互動界面。