摘要

{{ }} 雙大括號語法是 Vue「宣告式渲染」理念的直接體現。我們只需「宣告」畫面與資料的關係，而無需關心具體的 DOM 操作過程。

定義與說明

「宣告式渲染」是指我們只描述想要的結果（例如：這個 <h1> 的內容永遠等於 title 資料），而不是下達具體的步驟（例如：找到 <h1>，更新它的文字）。{{ }} 內部可以放置任何合法的 JavaScript 單行表達式，且為了安全，它會自動將 HTML 標籤逸出為純文字。

實作範例

Vue SFC

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

<template>
  <!-- 我們只宣告：p 的內容由 price 決定 -->
  <p>價格: {{ price }}</p>

  <!-- 也可以是表達式 -->
  <p>含稅價: {{ price * 1.05 }}</p>
</template>

結論

宣告式渲染是 Vue 的核心哲學，它讓我們能專注於業務邏輯而非繁瑣的 DOM 操作。{{ }} 是實現此哲學最基礎、最安全的工具。

宣告式渲染雙大括號語法 JavaScript 表達式