摘要

模板語法是 Vue 將資料渲染到畫面的規則。其最核心的兩個部分是：使用 {{ }} 顯示動態文字，以及使用 : (v-bind 的縮寫) 來動態綁定 HTML 屬性。

定義與說明

Vue 模板語法的兩個核心概念：

文字插值 (Text Interpolation)

使用雙大括號 {{ }} 將 <script> 中的資料以純文字形式插入到 HTML 中。

屬性綁定 (Attribute Binding)

使用 v-bind 指令（縮寫為 :）將 HTML 標籤的屬性值（如 src, href）與 <script> 中的資料進行綁定。

實作範例

基本的文字插值與屬性綁定範例

Vue SFC

<script setup>
import { ref } from 'vue';
const message = ref('Hello Vue!');
const imageUrl = ref('/logo.png');
</script>

<template>
  <!-- 文字插值 -->
  <h1>{{ message }}</h1>

  <!-- 屬性綁定 (使用縮寫) -->
  <img :src="imageUrl">
</template>

結論

{{ }} 和 : 是 Vue 模板語法的兩大支柱，它們共同構建了資料與畫面之間的響應式橋樑，讓 UI 能自動根據資料狀態進行更新。

模板語法文字插值屬性綁定