Vue 模板語法說明

Vue 提供了直觀的 模板語法 (Template Syntax)，讓你可以在 HTML 中直接綁定資料、控制顯示邏輯。
這裡先做總覽，細節會拆分到各個子章節。

1. 插值與綁定

• 插值語法：{{ }} → 顯示變數或表達式。
• 屬性綁定：:屬性 → 將資料動態綁定到 HTML 屬性。

📌 延伸指令：

• v-text → 將資料當文字插入元素。
• v-html → 將資料當 HTML 插入元素（⚠️ 需注意 XSS 安全問題）。
• v-once → 元素只渲染一次，不會隨響應式資料更新。

2. 條件判斷

• v-if、v-else-if、v-else → 控制元素是否渲染。
• v-show → 透過 display:none 控制顯示/隱藏。

3. 迴圈渲染

• v-for → 用於渲染清單或重複元素。

4. 事件綁定

• v-on / @事件 → 綁定事件（例如 @click）。

5. 雙向綁定

• v-model → 表單與資料雙向綁定。

小結

• 插值與綁定：{{ }}、:屬性、v-text、v-html、v-once。
• 條件判斷：v-if、v-else、v-show。
• 迴圈渲染：v-for。
• 事件綁定：@事件。
• 雙向綁定：v-model。