新手第六步：Vue.js 入門　前端框架到底在解決什麼問題？

Fri, 17 Apr 2026 00:00:00 +0000

上一篇我們用原生 JavaScript 做了計數器。雖然可以動，但你有沒有發現——當功能一多，程式碼就開始變得雜亂？

這正是前端框架要解決的問題。今天我們來聊聊目前最適合新手入門的框架：Vue.js。

1. 為什麼要用框架？

先想像一個場景：你要做一個購物車頁面，商品數量改了，頁面上的「小計」、「總計」、「結帳按鈕顯示金額」都要跟著更新。

用原生 JS 你要：

抓到「小計」元素，修改它
抓到「總計」元素，修改它
抓到「按鈕」元素，修改它
下次改需求還要重來一遍…

用 Vue.js 你只需要： 修改一個變數，頁面上所有相關顯示自動同步更新。

這個核心概念叫做**「響應式（Reactivity）」**——數據變了，畫面自動跟著變。

2. Vue.js 是什麼？

Vue.js 是一個用 JavaScript 寫的前端框架，由前 Google 工程師尤雨溪（Evan You）在 2014 年創建。

它有幾個讓新手特別喜歡的特點：

學習曲線平緩：和 React 相比，Vue 對新手更友善，語法更接近原生 HTML/JS
文件超完整：官方中文文件寫得非常好，遇到問題查文件通常就能解決
漸進式引入：可以只在部分頁面使用 Vue，不用整個專案重寫

3. 快速體驗 Vue：不需要安裝任何東西

最快的方式是直接用 CDN 引入 Vue，就像引入一個 JS 檔案一樣：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<!DOCTYPE html>
<html>
<head>
 <title>我的 Vue 練習</title>
</head>
<body>
 <div id="app">
 <h1>{{ message }}</h1>
 <button @click="changeMessage">點我換訊息</button>
 </div>

 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <script>
 const { createApp, ref } = Vue;

 createApp({
 setup() {
 const message = ref("你好，Vue！");

 function changeMessage() {
 message.value = "訊息被改掉了！";
 }

 return { message, changeMessage };
 }
 }).mount("#app");
 </script>
</body>
</html>

存檔，打開瀏覽器，你會看到標題寫著「你好，Vue！」，點按鈕後自動變成「訊息被改掉了！」——不需要手動 getElementById，Vue 自動幫你搞定！

4. Vue 的核心概念

模板語法：`{{ }}`

雙大括號是 Vue 的「插值語法」，把變數的值直接顯示在 HTML 裡：

1

<p>你好，{{ name }}！你今年 {{ age }} 歲。</p>

只要 name 或 age 變數的值改變，頁面會自動更新，不需要任何額外操作。

響應式變數：`ref()`

在 Vue 3 裡，用 ref() 建立會「被追蹤」的響應式變數：

1
2
3


const count = ref(0); // 數字
const name = ref("小明"); // 文字
const show = ref(true); // 布林值

修改時要用 .value：

1

count.value = count.value + 1;

但在 HTML 模板裡用 {{ count }} 就好，Vue 自動處理 .value。

事件綁定：`@click`

Vue 用 @ 符號取代原本的 addEventListener，寫起來清爽很多：

1
2
3
4
5
6


<!-- 原生 JS -->
<button id="btn">點我</button>
<script> document.getElementById("btn").addEventListener("click", doSomething) </script>

<!-- Vue 的寫法 -->
<button @click="doSomething">點我</button>

屬性綁定：`v-bind` 或 `:`

想把 JS 變數的值套用到 HTML 屬性上，用 : 綁定：

1
2


<img :src="imageUrl" :alt="imageAlt">
<a :href="linkUrl">點我</a>

條件渲染：`v-if`

根據條件決定要不要顯示某個元素：

1
2


<p v-if="isLoggedIn">歡迎回來！</p>
<p v-else>請先登入。</p>

列表渲染：`v-for`

用來把陣列資料一筆一筆顯示出來：

1
2
3


<ul>
 <li v-for="item in fruits" :key="item">{{ item }}</li>
</ul>

1

const fruits = ref(["蘋果", "香蕉", "橘子"]);

5. 給新手的實戰練習：用 Vue 重做計數器

還記得上一篇用原生 JS 做的計數器嗎？現在用 Vue 來做同樣的功能，感受一下差異：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


<!DOCTYPE html>
<html>
<head>
 <title>Vue 計數器</title>
 <style>
 body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #f0f4f8;
 font-family: Arial, sans-serif;
 }
 .counter { text-align: center; }
 #count-display { font-size: 80px; color: #2c3e50; margin: 0; }
 button {
 font-size: 18px;
 padding: 10px 30px;
 margin: 10px;
 cursor: pointer;
 border: none;
 border-radius: 8px;
 background-color: #3498db;
 color: white;
 }
 button:hover { background-color: #2980b9; }
 </style>
</head>
<body>
 <div id="app" class="counter">
 <p id="count-display">{{ count }}</p>
 <button @click="count++">＋ 加一</button>
 <button @click="count = 0">重置</button>
 </div>

 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <script>
 const { createApp, ref } = Vue;

 createApp({
 setup() {
 const count = ref(0);
 return { count };
 }
 }).mount("#app");
 </script>
</body>
</html>

注意到了嗎？JavaScript 的部分從 10 行縮短到 3 行。Vue 幫你處理了所有「抓元素、更新畫面」的瑣事，你只需要專注在「資料邏輯」本身。

6. Vue vs 原生 JS：什麼時候用哪個？

情境	建議
簡單的互動（一個按鈕、一個動畫）	原生 JS 就夠了
需要管理很多資料狀態的頁面	用 Vue
單頁應用程式（SPA）	強烈建議用 Vue
學習基礎概念	先學原生 JS，再學 Vue

結語：框架是工具，不是魔法

Vue.js 讓你寫更少的程式碼、更快做出功能，但它的底層還是 JavaScript。所以上一篇學的變數、函式、DOM 概念，在 Vue 裡全都用得到。

框架只是幫你把重複的工作自動化，你的 JS 基礎夠紮實，框架學起來就會快很多。

接下來你可以做什麼？ 有了 Vue 的基礎後，下一篇我們要學 Git 版本控制——這是所有工程師都必備的技能，讓你的程式碼永遠有「後悔藥」可以吃，也是團隊協作的核心工具。

準備好學工程師的必備神器了嗎？下一篇見！

Vue.js on EricChung的程式勇者村

新手第六步：Vue.js 入門 前端框架到底在解決什麼問題？