Day4 Vue模板語法- 插值表達式

2025 iThome 鐵人賽

DAY 4

Vue.js

新手學習Vue.js與實作之旅系列第 4 篇

17th鐵人賽

zhiz

2025-09-09 18:20:48

71 瀏覽

分享至

今天在開始介紹Vue模板語法之前，首先要來介紹Vue 元件可以使用兩種不同的 API 樣式進行撰寫：在這個系列文章中，起初學習基礎語法、範例程式碼會使用Options API，之後實作專案才會使用到Composition API哦～

Options API

使用選項物件（如 data、mount等）來定義元件邏輯，在這些選項中可以透過 this 來訪問元件實例的資料與方法，其語法結構比較直觀，適合初學者或邏輯較簡單的元件。

Composition API

在單一檔案元件(SFC )中，通常與 <script setup> 語法糖一起使用，透過 ref、reactive等函式組合邏輯，讓程式碼可以更簡潔，並且提供更靈活的邏輯組織方式，適合大型或複雜元件的開發。

接下來要來介紹第一個常用的Vue語法～

插值表達式 {{ }}

文本插值是最基本的資料綁定形式，透過使用雙重大括號 {{ }} 語法，當響應式數據發生變化時，插值位置的文本內容會自動更新，此外，插值表達式只能用於文本內容中，可以支援 JavaScript 表達式，但不能用於 HTML 屬性綁定。

<p>{{content}}</p>

以下是使用Options API實作Hello World範例來更加了解此語法的應用
P.S. 我在練習範例程式碼時，是利用引入CDN的方式來撰寫Vue哦
範例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div class="container">
        <h1>{{pageTitle}}</h1>
        <p>{{content}}</p>
    </div>    

    <script>
        Vue.createApp({
            data(){
                return{
                    pageTitle: 'Hello World~',
                    content: '一起踏上學習vue.js之旅'
                };
            }
        }).mount('.container');
    </script>
</body>
</html>

.mount('.container')表示將 Vue 應用程式掛載到class為container的 DOM 元素上，若 pageTitle 或 content 的值改變時，其相對應的DOM內容就會自動更新。
畫面呈現結果：