建立 2026-09-15 更新 2026-09-15

樣板語法

樣板是「用看起來像 HTML 的語法，描述畫面該長什麼樣子」。Vue 會把樣板編譯成渲染函式，資料變了只更新該動的 DOM。官方：Template Syntax。

文字插值

雙大括號把 JavaScript 值插進文字。這叫 Mustache 語法：

<p>訊息：{{ msg }}</p>
<p>1 + 1 = {{ 1 + 1 }}</p>

括號裡是表達式，不是陳述句。可以呼叫方法、用三元運算，不要在裡面寫 if 或迴圈。

屬性綁定：v-bind 與 :

HTML 屬性不能用 {{ }}，要用 v-bind（縮寫 :）：

<img :src="imageUrl" :alt="imageAlt">
<button :disabled="isLoading">送出</button>

imageUrl、isLoading 來自 script。屬性值會隨資料更新。

事件：v-on 與 @

<button @click="increment">+1</button>
<input @keyup.enter="submit">

@click 是 v-on:click 的縮寫。.enter 是按鍵修飾符。處理函式寫在 <script setup> 裡即可，樣板能直接呼叫。

雙向綁定：v-model

表單最常用。它等於「顯示值」加上「輸入時更新值」：

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

<template>
  <input v-model="name" placeholder="你的名字">
  <p>你好，{{ name }}</p>
</template>

核取方塊、單選、<select> 也能用 v-model，型別會對應該輸入元件。細節見 表單輸入綁定。

樣板裡能做什麼、不能做什麼

可以：讀響應式狀態、呼叫函式、簡單運算、用指令。

不要：在樣板裡改狀態（把變更寫進事件處理）、放複雜邏輯（抽成 computed 或函式）。樣板負責「看起來怎樣」，邏輯放 script。

下一步：響應式 解釋 msg、name 為什麼一改畫面就動。

推薦影音

Vue 樣板語法：標籤內文與屬性

來源：彭彭的課程

繁中示範 {{ }} 插值與 v-bind 綁屬性。對應本頁前兩節。下一集「事件處理」在 播放清單。

Vue JS 3 Tutorial #7 — Forms & Inputs

來源：Net Ninja　約 46 分鐘

專門講 v-model、鍵盤事件與表單送出。對應本頁「雙向綁定」。