LESSON-20 · 零基礎學生教材
Vue 3 CDN：響應式與條件／清單渲染
完成可搜尋服務清單，資料變化時卡片、數量與空狀態同步更新。
先理解：這堂課解決什麼問題？
服務資料需要依搜尋或分類變化，手動操作 DOM 會讓畫面與資料逐漸不同步。
本堂要完成：完成可搜尋服務清單，資料變化時卡片、數量與空狀態同步更新。
學習邊界：先完成「用 ref、computed、v-for 與 v-if 管理服務清單畫面」，不提前引入尚未教過的框架或建置工具。
先備知識與操作環境
本堂先備：服務資料需要依搜尋或分類變化，手動操作 DOM 會讓畫面與資料逐漸不同步。 需要的檔案是 #services-app、ref、computed、v-for、v-if 與 key。若尚未理解這些位置，先開啟 README 的最小實驗，再開始階段練習。
- 檔案位置：先找到
#services-app、ref、computed、v-for、v-if與 key，再從本頁的最小實驗開始。 - 瀏覽器：開啟最小實驗與階段頁；每次修改後儲存並重新整理。
- DevTools：依本堂內容使用 Elements、Styles、Computed、Console 或 Network，記下第一個可觀察證據。
- 操作習慣：每次只修改一個檔案或一個責任，先預測、再操作、最後驗收。
先做最小實驗：先看見結果
這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。
- 入口：開啟
examples/minimal.html。 - 操作：開啟
examples/minimal.html，確認 Network 載入 Vue CDN，再點擊元件上的控制項。 - 預期：Vue 管理的文字、清單或表單狀態即時更新。
- 重設：重新整理頁面，回到初始 reactive state。
學生練習流程
依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。
-
1
最小實驗
先閱讀本頁的問題、檔案地圖、名詞卡與最小例子。 -
2
Step 2
自己回答互動問答 4 題，再展開解析。 -
3
最小實驗 2
開啟最小實驗，實際操作一次並記下證據。 -
4
Starter
把 Starter 複製到自己的工作資料夾，照 3 張微步驟卡逐一完成；每一步都要看到結果再繼續。 -
5
Checkpoint
前往 Checkpoint，只處理 1 個本堂核心缺口；先預測，再用指定證據驗收。 -
6
Solution
前往 Solution，先看逐檔差異與修改原因，再決定要不要把完整內容帶回自己的檔案。 -
7
變體驗收
完成情境變體與獨立挑戰，留下檔案位置、操作、結果與驗收證據，並閱讀下一堂銜接：元件資料流：下一堂會把重複的服務卡片拆成props與 emits。
檔案地圖：每個位置負責什麼？
先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。
#services-app服務 Vue 容器：讓 Vue 管理服務清單與操作結果。refVue 反應式狀態：包住會改變且需要更新畫面的值。computedVue 衍生狀態：根據其他反應式資料計算可重用結果。v-forVue 清單語法：依資料陣列重複產生畫面項目。v-if 與 keyVue 條件與識別語法：控制顯示條件並穩定辨識清單節點。
先學會這些詞
先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。
Vue 啟動
3 個詞CDNContent Delivery Network 白話意思：從網路提供可以直接使用的 Vue 程式。 展開查看正式定義、範例與驗收證據
- 正式定義
- 由分散式伺服器提供靜態資源的發布方式；本課以 script 載入 Vue global build。
- 什麼時候用
- 不使用 Vite、npm 時仍要在 HTML 使用 Vue 3。
- 最小範例
- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>。
- 可觀察證據
- Network 的 Vue 請求與 Console 的
Vue物件。 - 容易混淆
- 和 npm 套件安裝混淆；CDN 是瀏覽器載入，不是本機建置工具。
createAppcreateApp 白話意思：建立一個 Vue 應用程式的起點。 展開查看正式定義、範例與驗收證據
- 正式定義
- 從元件選項建立 Vue application instance 的函式。
- 什麼時候用
- 要讓一個 HTML 區域由 Vue 接手管理時。
- 最小範例
- Vue.createApp({ setup() { return {}; } })。
- 可觀察證據
- App
mount後#app內的資料或事件開始由 Vue 管理。 - 容易混淆
- 和
mount混淆；createApp建立應用，mount才指定放到哪裡。
mountmount 白話意思：把 Vue 應用接到頁面上的指定元素。 展開查看正式定義、範例與驗收證據
- 正式定義
- 將 application instance 掛載到 DOM container 並開始渲染的操作。
- 什麼時候用
- 已寫好 Vue app，準備讓它出現在畫面上時。
- 最小範例
- .mount("#app")。
- 可觀察證據
#app內出現 template 結果，未掛載則保留原始文字。- 容易混淆
- 和 DOM append 混淆；
mount同時啟動 Vue 的反應式管理。
反應式資料
2 個詞refref 白話意思：包住一個會變的值，值改了畫面會跟著更新。 展開查看正式定義、範例與驗收證據
- 正式定義
- Vue Composition API 中建立可變反應式引用的函式。
- 什麼時候用
- 按鈕計數、表單狀態或目前選項需要驅動畫面時。
- 最小範例
- const count = Vue.ref(0)，事件中使用 count.value += 1。
- 可觀察證據
- 點擊後畫面文字與 Vue DevTools 或 Console 值同步變化。
- 容易混淆
- 和普通
const混淆；普通值改變不會自動通知 Vue 重新渲染。
computedcomputed property 白話意思：從既有資料算出一個可重用的結果。 展開查看正式定義、範例與驗收證據
- 正式定義
- 根據反應式依賴建立快取、在依賴改變時重新計算的衍生狀態。
- 什麼時候用
- 篩選清單、總價或顯示文字由其他資料推導時。
- 最小範例
- const total = Vue.computed(() => items.value.length)。
- 可觀察證據
- 修改來源資料後衍生結果更新，但不需手動改第二份資料。
- 容易混淆
- 和 method 混淆；
computed表達衍生狀態，method 常用於每次呼叫的動作。
元件溝通
2 個詞propsprops 白話意思：父元件傳給子元件的資料。 展開查看正式定義、範例與驗收證據
- 正式定義
- 元件接收、由父層擁有且子層只讀的輸入資料。
- 什麼時候用
- 多張卡片共用同一個元件但內容不同時。
- 最小範例
- 子元件宣告 props: { title: String }。
- 可觀察證據
- 父層換資料後子卡片文字正確更新。
- 容易混淆
- 和 local state 混淆；
props來源在父層，子元件不直接改它。
emitsemits 白話意思：子元件通知父元件某件事發生了。 展開查看正式定義、範例與驗收證據
- 正式定義
- Vue 元件以自訂事件向父層傳遞互動結果的機制。
- 什麼時候用
- 子卡片被點擊、表單完成或需要父層改資料時。
- 最小範例
- emit("select", service.id)，父層監聽 @select。
- 可觀察證據
- 點擊子元件後父層狀態、Console 或清單結果改變。
- 容易混淆
- 和
props反方向混淆；props往下傳資料，emit往上通知事件。
最小例子：先看懂，再複製
這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。
<div id="app">
<h1>{{ title }}</h1>
<p>目前服務數：{{ serviceCount }}</p>
<button type="button" @click="addService">新增一項服務</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Live Lab：逐段讀碼與驗證
每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。
-
Step 1
載入 Vue CDN
- 目的
- 先確認瀏覽器取得 Vue，再建立 app。
- 修改位置
index.html
加入 Vue global CDN script- 預期結果
- Network 有 Vue，Console 的 Vue 可用。 本堂焦點是「用
ref、computed、v-for與v-if管理服務清單畫面」。 - 驗收證據
- Network 與 Console
- 卡住先查
- 只檢查一件事：
index.html是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
-
Step 2
建立並掛載 app
- 目的
- 分開理解
createApp和mount。 - 修改位置
index.html、main.js
建立setup並mount到#app- 預期結果
#app顯示 Vue template 結果。 本堂焦點是「用ref、computed、v-for與v-if管理服務清單畫面」。- 驗收證據
#app畫面- 卡住先查
- 只檢查一件事：
index.html、main.js是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
-
Step 3
加入
ref- 目的
- 用一個會變的狀態驅動按鈕與文字。
- 修改位置
main.js
建立ref並在事件中更新- 預期結果
- 點擊後文字同步改變。 本堂焦點是「用
ref、computed、v-for與v-if管理服務清單畫面」。 - 驗收證據
- 按鈕與 DOM
- 卡住先查
- 只檢查一件事：
main.js是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
-
Step 4
建立
computed- 目的
- 從來源資料推導總數或篩選結果。
- 修改位置
main.js
新增computed並顯示結果- 預期結果
- 改來源資料後衍生文字更新。 本堂焦點是「用
ref、computed、v-for與v-if管理服務清單畫面」。 - 驗收證據
- 資料與畫面
- 卡住先查
- 只檢查一件事：
main.js是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
-
Step 5
拆元件資料流
- 目的
- 示範
props往下、emit往上的方向。 - 修改位置
index.html、main.js
建立一個服務卡元件與自訂事件- 預期結果
- 父層資料可以改變子卡，子卡能通知父層。 本堂焦點是「用
ref、computed、v-for與v-if管理服務清單畫面」。 - 驗收證據
- 元件與 Console
- 卡住先查
- 只檢查一件事：
index.html、main.js是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
-
Step 6
完成 Vue 變體
- 目的
- 保留 CDN 架構，替換商家資料並驗收狀態。
- 修改位置
index.html、main.js
替另一商家完成服務清單或表單狀態- 預期結果
- 變更資料即可得到新畫面，沒有引入 Vite。 本堂焦點是「用
ref、computed、v-for與v-if管理服務清單畫面」。 - 驗收證據
- Network、畫面、Console
- 卡住先查
- 只檢查一件事：
index.html、main.js是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。
互動問答
先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。
Q1概念理解
「CDN（Content Delivery Network）」在本堂要解決什麼問題？
本題線索：CDN；回到名詞卡與 Network 的 Vue 請求與 Console 的 Vue 物件。
展開解析收合解析
白話解析：
從網路提供可以直接使用的 Vue 程式。 正式來說，由分散式伺服器提供靜態資源的發布方式；本課以 script 載入 Vue global build。
對照位置：
回到名詞卡「CDN」，再看 Network 的 Vue 請求與 Console 的 Vue 物件。
預期觀察：
你應該能用自己的話說出：不使用 Vite、npm 時仍要在 HTML 使用 Vue 3。
常見錯誤：
不要只回答「它是CDN」；那是重複名詞，不是說明責任。
立即驗證：
開啟 examples/minimal.html，依序做「開啟 examples/minimal.html，確認 Network 載入 Vue CDN，再點擊元件上的控制項。」並記下畫面或工具證據。
Q2程式碼閱讀
修改指定規則後，你預測畫面會看到什麼？
本題線索：index.html；要修改：加入 Vue global CDN script；觀察：Network 與 Console
展開解析收合解析
白話解析：
先看檔案責任，再預測結果。這一步的目的：先確認瀏覽器取得 Vue，再建立 app。
對照位置：
對照 Live Lab Step 1，位置是 index.html；範例內容：<div id="app">
<h1>{{ title }}</h1>
<p>目前服務數：{{ serviceCount }}</p>
<button type="button" @click="addService">新增一項服務</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
預期觀察：
Network 有 Vue，Console 的 Vue 可用。 本堂焦點是「用 ref、computed、v-for 與 v-if 管理服務清單畫面」。
常見錯誤：
如果只改了檔案但沒有結果，先不要重寫全部；只檢查一件事：index.html 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
立即驗證：
實際操作後檢查 Network 與 Console。
Q3概念比較
「CDN」和「createApp」在本堂的責任有什麼不同？
本題線索：比較 CDN 與 createApp；操作位置：index.html、main.js
展開解析收合解析
白話解析：
CDN：從網路提供可以直接使用的 Vue 程式。；createApp：建立一個 Vue 應用程式的起點。
對照位置：
對照兩張名詞卡的正式定義：由分散式伺服器提供靜態資源的發布方式；本課以 script 載入 Vue global build。／從元件選項建立 Vue application instance 的函式。
預期觀察：
你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。
常見錯誤：
不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。
立即驗證：
在 index.html、main.js 做「建立 setup 並 mount 到 #app」，再用 #app 畫面 比較前後差異。
Q4除錯驗收
如果完成操作後結果不對，你會先從哪一個證據開始查？
本題線索：index.html、main.js；第一個檢查位置：Network、畫面、Console
展開解析收合解析
白話解析：
先描述症狀，再提出一個最小假設。本堂常見錯誤是：改成 npm import
對照位置：
對照最後一段 Live Lab：index.html、main.js；檢查方式：只檢查一件事：index.html、main.js 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
預期觀察：
你要能指出一個具體位置，而不是一次修改很多檔案。
常見錯誤：
不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。
立即驗證：
重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。
常見誤解
- 看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
- 能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
- 本堂只使用既定的 HTML、CSS、JavaScript、Vue CDN、Apps Script mock 與 Cloudflare Pages 驗收範圍。
本堂任務與驗收
完成可搜尋服務清單，資料變化時卡片、數量與空狀態同步更新。
- 能用 輸入後清單更新 留下可重現證據。
- 能用
computed結果 留下可重現證據。 - 能用 key 留下可重現證據。
- 能用 空狀態與 Vue 警告 留下可重現證據。
- Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
- 遇到問題時能先寫出症狀，再檢查一個最小假設。