F2E 前端工程文件

Appearance

Vue 3 核心教學：掌握模板語法與資料渲染 ​

在理解了如何透過 createApp 建立應用程式後，接下來最核心的步驟，就是如何把 JavaScript 中的資料，精準且漂亮地呈現到網頁畫面上。

Vue 3 使用了以 HTML 為基礎的模板語法（Template Syntax），讓您能夠把 JavaScript 中的資料綁定到畫面上。模板看起來就像一般的 HTML，但加入了 Vue 的特殊語法——當資料改變時，畫面會自動更新，不需要手動操作 DOM。。本文將帶您一次搞懂最常用的網頁渲染技巧與指令。

文本插值：雙大括號（Mustache）與 v-text 指令 ​

在 Vue 3 中，要把純文字渲染到 HTML 標籤內，主要有兩種方式：經典的雙大括號 {{ }}，以及專屬的 v-text 指令。這兩者都是響應式的，當資料改變時，畫面就會即時更新。

經典的雙大括號語法（Mustache） ​

這是最常見、最直覺的綁定方式。它的最大優點是可以與靜態文字混寫，並且支援簡單的 JavaScript 單一表達式，例如：三元運算子、數學運算或內建方法。

html
<!-- 1. HTML 模板 -->
<span>目前狀態：{{ status }}</span>

<!-- 2. 運算式 -->
<p>總金額：{{ price * quantity }} 元</p>

<!-- 3. 三元運算子 -->
<p>帳號狀態：{{ isLogin ? '已登入' : '請登入' }}</p>

<!-- 4. 呼叫 JavaScript 內建方法 -->
<p>會員名稱（大寫）：{{ username.toUpperCase() }}</p>

專屬的 v-text 指令 ​

v-text 是 Vue 提供的屬性指令，它的作用與雙大括號非常相似，但運作行為有些許不同。

html
<p v-text="message"></p>

關鍵對比

在網頁前端開發中，這兩者該如何選擇？以下是它們的核心差異：

  • 覆蓋行為： 雙大括號允許局部塞入變數；而 v-text 則是完全覆蓋該 HTML 標籤內原有的所有內容。
  • 防止閃爍： 在網路極慢、JavaScript 尚未完全載入時，雙大括號可能會在畫面上短暫露出原碼 {{ message }}。而使用 v-text 的標籤在 Vue 載入前只會是個空標籤，能自然避免這種視覺閃爍。

屬性綁定：使用 v-bind 控制 HTML 屬性 ​

雙大括號只能用在 HTML 的內文插值，如果您想要動態控制 HTML 標籤內部的 屬性，例如：id、class、src 或 href，就必須使用 Vue 的核心指令：v-bind。

v-bind 基本用法 ​

當我們想讓圖片的網址由 JavaScript 控制時：

html
<!-- 完整寫法 -->
<img v-bind:src="imageUrl" alt="商品圖片" />

v-bind 縮寫形式 ​

因為 v-bind 太常用到了，Vue 提供了專屬的縮寫——直接使用冒號 :：

html
<!-- 縮寫寫法（等同於上方效果） -->
<img :src="imageUrl" :alt="imageDesc" />

<!-- 動態控制超連結與樣式類別 -->
<a :href="siteUrl" :class="activeClass">前往官方網站</a>

布林屬性綁定 ​

對於 disabled、checked、readonly 等布林屬性，綁定 true 會加上屬性，false 或 null/undefined 會移除屬性：

html
<button :disabled="isSubmitting">送出</button>
<input :checked="isChecked" type="checkbox" />
<input :readonly="isReadOnly" type="text" />

動態屬性名稱 ​

屬性名稱本身也可以是動態的，用 [方括號] 包起來：

html
<a :[attrName]="attrValue">連結</a>
js
const attrName = ref("href");
const attrValue = ref("https://vuejs.org");

渲染原始 HTML：v-html 的使用時機與風險 ​

有時候，我們從後端資料庫取得的資料本身就包含 HTML 標籤，例如：網誌文章內容。如果直接用 {{ }} 渲染，瀏覽器會直接把標籤當作純文字印出來。

為了正確解析並渲染出 HTML 結構，我們需要使用 v-html。

v-html 範例 ​

js
// JavaScript 狀態
const rawContent = ref(
  '<span style="color: red">重要通知：</span>系統即將維護。'
);
html
<!-- 使用 v-html 渲染 -->
<div v-html="rawContent"></div>

安全資安防護（XSS 攻擊） ​

在網站上動態渲染任意的 HTML 是非常危險的，容易受到 XSS（跨網站程式碼） 的惡意攻擊。

DANGER

請絕對不要將 v-html 用在 使用者可以自由輸入並上傳 的內容，例如：留言板、評論區。只有在確定資料來源百分之百安全，例如：自家後台編輯器產生的文章時才能使用。

進階控制：v-cloak、v-once 與 v-pre 的效能優化 ​

除了上述核心指令，Vue 還提供了三個處理特殊情境、提升網頁效能與優化使用者體驗的輔助指令：

v-cloak（防止語法閃爍） ​

v-cloak 指令會留在 HTML 標籤上，直到關聯的應用程式實體結束編譯。我們可以配合 CSS 隱藏未編譯的模板：

css
[v-cloak] {
  display: none;
}
html
<!-- 在編譯完成前，這個 div 會完全隱藏，避免露出雙大括號 -->
<div id="App" v-cloak>
  <p>{{ message }}</p>
</div>

v-once（只渲染一次） ​

如果您有一塊資料在畫面初始化後就再也不會改變，可以使用 v-once。這會讓 Vue 跳過對該節點的追蹤，進而提升網頁效能。

html
<!-- 即使隨後 message 改變，這裡的文字也永遠停留在第一次渲染的數值 -->
<span v-once>這是一張不可更改的發票號碼：{{ invoiceId }}</span>

v-pre（跳過編譯純文字） ​

v-pre 是一個非常特殊的指令。它的作用是告訴 Vue，完全跳過這個元素和它的子元素的編譯過程。

因此，當您使用 v-pre 時，標籤內所有的 Vue 語法，例如：雙大括號、指令，都不會被解析，而是會原封不動地當作純文字印在網頁上。

html
<span v-pre>這是一段 Vue 教學範例：{{ message }}</span>

使用場景

  • 撰寫技術文件或教學網頁： 當您需要直接在網頁上展示 Vue 的雙大括號語法原始碼時。
  • 效能優化： 如果有大區塊的 HTML 裡面完全是靜態文字，百分之百沒有任何 Vue 的語法或資料綁定，加上 v-pre 可以讓 Vue 徹底跳過它，大幅加快大型網頁的編譯與渲染速度。

總結：Vue 3 模板語法的應用場景 ​

指令說明適用場景
{{ expr }}文字插值，可以嵌入文字中間最常用，顯示動態文字
v-text="expr"設定整個元素的文字內容需要完全替換元素文字時
v-html="expr"渲染 HTML 標籤字串有安全風險，切勿用來渲染未經過濾的使用者輸入
v-once只渲染一次，不隨資料更新靜態內容的效能最佳化
v-pre跳過 Vue 編譯，原樣輸出顯示包含 {{ }} 的程式碼範例
v-bind:attr / :attr動態綁定 HTML 屬性值src、href、disabled 等屬性

Copyright © 2025-Present