初步認識 Vue 之後，接著我們就動手開始寫 Vue 吧。不過在建立專案之前，讓我們先從熟悉的地方，也就是靜態的原生寫法開始。
如果還沒看過介紹 Vue 的文章，可以在這裡移步觀看：我是傳送門
這篇文章的範例與流程主要來自 Scrimba 課程教學，並截取部分 Vue 官方文件說明。
原始 HTML 檔案
假如我們的原始檔案是這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Vue.js Basics</title>
</head>
<body>
<header>
<span>🤪</span>
</header>
<main>
<h1>Hello, Vue!</h1>
<p>
I'm about to learn
<a href="https://vuejs.org/" target="_blank"> Vue.js </a>
!
</p>
</main>
<footer>
<p>© 2026</p>
</footer>
</body>
</html>
改寫流程
接著，我們要透過 CDN 的方式來改寫成 Vue。這代表我們會透過 <script> 標籤，引入 Vue 的來源檔案：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
以下是我們要執行的流程：
- 引入 Vue CDN
- 把所有內容包在 id 為 app 的容器裡，作為根元件 (root component)
- 在另一個
<script>標籤中，從Vue物件中取出createApp與ref方法 - 使用
createApp建立應用程式實例，並透過mount掛載到#app上 - 使用
ref定義動態資料
前四步驟範例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Vue.js Basics</title>
</head>
<body>
<!-- 👇 1. 放入 CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 👇 2. 把所有內容放入 app 容器 -->
<div id="app">
<header>
<span>🤪</span>
</header>
<main>
<h1>Hello, Vue!</h1>
<p>
I'm about to learn
<a href="https://vuejs.org/" target="_blank"> Vue.js </a>
!
</p>
</main>
<footer>
<p>© 2026</p>
</footer>
</div>
<!-- 撰寫 Vue 程式 -->
<script>
// 👇 3. 從 Vue 取出需要的函式
const { createApp, ref } = Vue
// 👇 4. 創建並掛載應用程式實例
createApp({
// 根元件設置
}).mount("#app")
</script>
</body>
</html>
💡 補充：關於 createApp
- Vue 建立應用程式的方法，會回傳應用程式實例。
- 所傳入的物件事實上是一個元件，通常是應用程式的根元件。
- 如果是透過 npm 建立專案，預設會在
App.vue匯集應用程式的元件，然後在main.js匯入。
// main.js
import { createApp } from "vue"
import App from "./App.vue"
createApp(App).mount("#app")
💡 補充：關於 mount
- 應用程式實例需要經過掛載，才會渲染出來。
- 傳入的是作為根元件的容器，可以是選擇器字串或是 DOM 元素。
- 這個方法應該在所有配置設置好、資源註冊完成後呼叫。
- 不像其他資源註冊方法，
mount回傳的是根元件實例，不是應用程式實例。
import { createApp } from "vue"
import App from "./App.vue"
const app = createApp(App)
// 資源註冊方法
app.use(...)
app.component(...)
app.provide(...)
app.mount("#app")
透過 ref 定義動態資料
要定義動態資料，首先需要在 #app 容器內的模板中，找到要改寫的地方，並使用 {{ }} 插值語法標記變數名稱。
假設我們想把 header 裡原本寫死的 🤪 改成可以動態變化的 emoji，可以執行以下步驟：
一、修改模板
先將模板的 🤪 改用 {{ emoji }} 取代，即：
<header>
<span>{{ emoji }}</span>
</header>
二、在根元件定義
createApp({
setup() {
const emoji = ref("🥹") // 定義
return { emoji } // 回傳
}
}).mount("#app")
當 setup 回傳 emoji 之後，模板中就可以使用它。畫面上原本的 🤪 就會變成 🥹 了。
完成版範例我寫在 CodePen 上：
💡 補充：關於 setup
由於這裡是採用 Composition API 寫法，所以會在 setup 使用從 Vue 物件取得的 ref 方法定義資料。
你可能會在其他地方看到 Options API 的寫法，這樣便可以不需要引用方法，直接在 data 定義：
createApp({
data() {
return { emoji: "🥹" }
}
}).mount("#app")
💡 補充：什麼是 In-DOM 根元件模板？
掛載目標 #app 容器內的 DOM，稱為「In-DOM 根元件模板」。以本文範例來說，就是原本在 body 裡的 header、main 及 footer。
當我們呼叫 mount("#app") 時，Vue 會把 #app 內的 HTML 當作 template 進行編譯，效果就和專案模式中寫在 App.vue裡的 <template> 相同。
這種寫法多見於 CDN 的使用方式，不需要建置工具即可運作。不過在實務專案中，通常會搭配建置工具（如 Vite）並使用 .vue 單檔元件來開發。
小結
這篇文章來自於 Scrimba 教學影片內容，主要快速走過如何透過 CDN 撰寫 Vue 程式碼，其中包括：
- 用
createApp建立應用程式實例 - 用
mount將應用程式掛載到根元件上 - 用
ref定義動態資料
相信對開專案後，能夠在理解 Vue 專案的運作上有所幫助。
參考資料
Vue 入門系列文章
- [ Vue 入門 ] 01：宣告式渲染、響應式系統與 SFC
- [ Vue 入門 ] 02 - 從原生 HTML 到 CDN 應用，打造 Vue 動態介面
