LESSON-20 · 零基礎學生教材
用 ref、computed、v-for 與 v-if 管理服務清單畫面
完成可搜尋服務清單，資料變化時卡片、數量與空狀態同步更新。
先理解：這堂課解決什麼問題？
服務資料需要依搜尋或分類變化，手動操作 DOM 會讓畫面與資料逐漸不同步。
本堂要完成：完成可搜尋服務清單，資料變化時卡片、數量與空狀態同步更新。
學習邊界：先完成「用 ref、computed、v-for 與 v-if 管理服務清單畫面」，不提前引入尚未教過的框架或建置工具。
先備知識與操作環境
本章專用教材只使用既定技術邊界。先開啟 examples/minimal.html，再依 Starter→Checkpoint→Solution 留下 輸入後清單更新、computed 結果、key、空狀態與 Vue 警告 證據。
- 檔案位置：先找到
#services-app、ref、computed、v-for、v-if與 key，再從本頁的最小實驗開始。 - 瀏覽器：開啟最小實驗與階段頁；每次修改後儲存並重新整理。
- DevTools：依本堂內容使用 Elements、Styles、Computed、Console 或 Network，記下第一個可觀察證據。
- 操作習慣：每次只修改一個檔案或一個責任，先預測、再操作、最後驗收。
先做最小實驗：先看見結果
這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。
- 入口：開啟
examples/minimal.html。 - 操作：開啟專章最小範例，以 Tab 完成一次操作，並比對畫面、Elements、Console 與 390px。
- 預期：畫面只呈現 JavaScript .value 與 template 自動解包、
ref與 reactive 選擇、computed與 method、v-if／v-show 與穩定 key 的本章責任，不出現跨章模板。 - 重設：重新整理
examples/minimal.html，不寫入正式資料也不執行正式部署。
學生練習流程
依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。
-
1
最小實驗
先閱讀本頁的問題、檔案地圖、名詞卡與最小例子。 -
2
Step 2
自己回答互動問答 4 題，再展開解析。 -
3
最小實驗 2
開啟最小實驗，實際操作一次並記下證據。 -
4
Starter
把 Starter 複製到自己的工作資料夾，照 3 張微步驟卡逐一完成；每一步都要看到結果再繼續。 -
5
Checkpoint
前往 Checkpoint，只處理 1 個本堂核心缺口；先預測，再用指定證據驗收。 -
6
Solution
前往 Solution，先看逐檔差異與修改原因，再決定要不要把完整內容帶回自己的檔案。 -
7
變體驗收
完成情境變體與獨立挑戰，留下檔案位置、操作、結果與驗收證據，並閱讀下一堂銜接：元件資料流：下一堂才會拆分父層、子層與事件契約。
檔案地圖：每個位置負責什麼？
先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。
#services-app專章檔案：負責 用ref、computed、v-for與v-if管理服務清單畫面 的可執行結果。ref專章檔案：負責 用ref、computed、v-for與v-if管理服務清單畫面 的可執行結果。computed專章檔案：負責 用ref、computed、v-for與v-if管理服務清單畫面 的可執行結果。v-for專章檔案：負責 用ref、computed、v-for與v-if管理服務清單畫面 的可執行結果。v-if 與 key專章檔案：負責 用ref、computed、v-for與v-if管理服務清單畫面 的可執行結果。
先學會這些詞
先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。
反應式資料
3 個詞JavaScript .value 與 template 自動解包JavaScript .value 與 template 自動解包 白話意思：用來理解「JavaScript .value 與 template 自動解包」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 JavaScript .value 與 template 自動解包 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 JavaScript .value 與 template 自動解包 或排查相關問題時。
- 最小範例
- JavaScript .value 與 template 自動解包
- 可觀察證據
- 能在專章範例指出 JavaScript .value 與 template 自動解包 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
ref 與 reactive 選擇ref 與 reactive 選擇
白話意思：用來理解「ref 與 reactive 選擇」的實務概念。
展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將
ref與 reactive 選擇 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。 - 什麼時候用
- 實作
ref與 reactive 選擇 或排查相關問題時。 - 最小範例
- ref 與 reactive 選擇
- 可觀察證據
- 能在專章範例指出
ref與 reactive 選擇 的操作結果。 - 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
computed 與 methodcomputed 與 method
白話意思：用來理解「computed 與 method」的實務概念。
展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將
computed與 method 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。 - 什麼時候用
- 實作
computed與 method 或排查相關問題時。 - 最小範例
- computed 與 method
- 可觀察證據
- 能在專章範例指出
computed與 method 的操作結果。 - 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
條件與清單渲染
1 個詞
v-if／v-show 與穩定 keyv-if／v-show 與穩定 key
白話意思：用來理解「v-if／v-show 與穩定 key」的實務概念。
展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將
v-if／v-show 與穩定 key 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。 - 什麼時候用
- 實作
v-if／v-show 與穩定 key 或排查相關問題時。 - 最小範例
- v-if／v-show 與穩定 key
- 可觀察證據
- 能在專章範例指出
v-if／v-show 與穩定 key 的操作結果。 - 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
驗收與除錯
2 個詞可觀察證據可觀察證據 白話意思：用來理解「可觀察證據」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 可觀察證據 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 可觀察證據 或排查相關問題時。
- 最小範例
- 可觀察證據
- 可觀察證據
- 能在專章範例指出 可觀察證據 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
單一變因除錯單一變因除錯 白話意思：用來理解「單一變因除錯」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 單一變因除錯 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 單一變因除錯 或排查相關問題時。
- 最小範例
- 單一變因除錯
- 可觀察證據
- 能在專章範例指出 單一變因除錯 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
最小例子：先看懂，再複製
這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。
const keyword = ref("");Live Lab：逐段讀碼與驗證
每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。
-
Step 1
在 JavaScript 使用 .value，template 使用自動解包
- 目的
- 建立
ref的兩種讀取語境。 - 修改位置
main.js
在 JavaScript 使用 .value，template 使用自動解包- 預期結果
- 關鍵字與畫面同步。
- 驗收證據
main.js、輸入值與畫面。- 卡住先查
- 只檢查目前指定的檔案與區塊。
-
Step 2
以
computed表示 filteredServices 派生資料- 目的
- 不建立第二份可變清單。
- 修改位置
main.js
以computed表示 filteredServices 派生資料- 預期結果
- 搜尋時清單與數量同步。
- 驗收證據
- 畫面、Console 與
computedcallback。 - 卡住先查
- 只檢查目前指定的檔案與區塊。
-
Step 3
用穩定 id 當 key，比較
v-if與 v-show- 目的
- 建立可預測清單與顯隱。
- 修改位置
index.html
用穩定 id 當 key，比較v-if與 v-show- 預期結果
- Console 無 key 警告，空結果可見。
- 驗收證據
- Elements、Console 與畫面狀態。
- 卡住先查
- 只檢查目前指定的檔案與區塊。
-
Step 4
補回遺漏的 .value
- 目的
- 讓 keyword 改變可重新計算。
- 修改位置
main.js
補回遺漏的 .value- 預期結果
- 清單可依關鍵字正確更新。
- 驗收證據
- 畫面、Console 與
main.js。 - 卡住先查
- 只檢查目前指定的檔案與區塊。
-
Step 5
專章驗收：JavaScript .value 與 template 自動解包
- 目的
- 將概念轉成可重現的實作證據。
- 修改位置
examples/minimal.html與對應 stage files
操作 JavaScript .value 與 template 自動解包 並記錄結果。- 預期結果
- 能展示 JavaScript .value 與 template 自動解包 的畫面、DOM、Console 或 Network 證據。
- 驗收證據
- 檔案位置、操作、預期、實際與重新驗證。
- 卡住先查
- 只重做一個最小操作並查看第一個錯誤。
-
Step 6
專章驗收：
ref與 reactive 選擇- 目的
- 將概念轉成可重現的實作證據。
- 修改位置
examples/minimal.html與對應 stage files
操作ref與 reactive 選擇 並記錄結果。- 預期結果
- 能展示
ref與 reactive 選擇 的畫面、DOM、Console 或 Network 證據。 - 驗收證據
- 檔案位置、操作、預期、實際與重新驗證。
- 卡住先查
- 只重做一個最小操作並查看第一個錯誤。
讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。
互動問答
先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。
Q1概念理解 「JavaScript .value 與 template 自動解包」在本堂要解決什麼問題？ 本題線索：JavaScript .value 與 template 自動解包；回到名詞卡與 能在專章範例指出 JavaScript .value 與 template 自動解包 的操作結果。 展開解析收合解析
白話解析：
用來理解「JavaScript .value 與 template 自動解包」的實務概念。 正式來說，本章將 JavaScript .value 與 template 自動解包 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
對照位置：
回到名詞卡「JavaScript .value 與 template 自動解包」，再看 能在專章範例指出 JavaScript .value 與 template 自動解包 的操作結果。
預期觀察：
你應該能用自己的話說出：實作 JavaScript .value 與 template 自動解包 或排查相關問題時。
常見錯誤：
不要只回答「它是JavaScript .value 與 template 自動解包」；那是重複名詞，不是說明責任。
立即驗證：
開啟 examples/minimal.html，依序做「開啟專章最小範例，以 Tab 完成一次操作，並比對畫面、Elements、Console 與 390px。」並記下畫面或工具證據。
Q2程式碼閱讀
修改指定規則後，你預測畫面會看到什麼？
本題線索：main.js；要修改：在 JavaScript 使用 .value，template 使用自動解包；觀察：main.js、輸入值與畫面。
展開解析收合解析
白話解析：
先看檔案責任，再預測結果。這一步的目的：建立 ref 的兩種讀取語境。
對照位置：
對照 Live Lab Step 1，位置是 main.js；範例內容：const keyword = ref("");
預期觀察：
關鍵字與畫面同步。
常見錯誤：
如果只改了檔案但沒有結果，先不要重寫全部；只檢查目前指定的檔案與區塊。
立即驗證：
實際操作後檢查 main.js、輸入值與畫面。。
Q3概念比較
「JavaScript .value 與 template 自動解包」和「ref 與 reactive 選擇」在本堂的責任有什麼不同？
本題線索：比較 JavaScript .value 與 template 自動解包 與 ref 與 reactive 選擇；操作位置：main.js
展開解析收合解析
白話解析：
JavaScript .value 與 template 自動解包：用來理解「JavaScript .value 與 template 自動解包」的實務概念。；ref 與 reactive 選擇：用來理解「ref 與 reactive 選擇」的實務概念。
對照位置：
對照兩張名詞卡的正式定義：本章將 JavaScript .value 與 template 自動解包 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。／本章將 ref 與 reactive 選擇 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
預期觀察：
你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。
常見錯誤：
不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。
立即驗證：
在 main.js 做「以 computed 表示 filteredServices 派生資料」，再用 畫面、Console 與 computed callback。 比較前後差異。
Q4除錯驗收
如果完成操作後結果不對，你會先從哪一個證據開始查？
本題線索：examples/minimal.html 與對應 stage files；第一個檢查位置：檔案位置、操作、預期、實際與重新驗證。
展開解析收合解析
白話解析：
先描述症狀，再提出一個最小假設。本堂常見錯誤是：只口頭說明完成。
對照位置：
對照最後一段 Live Lab：examples/minimal.html 與對應 stage files；檢查方式：只重做一個最小操作並查看第一個錯誤。
預期觀察：
你要能指出一個具體位置，而不是一次修改很多檔案。
常見錯誤：
不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。
立即驗證：
重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。
常見誤解
- 看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
- 能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
- 本堂只使用既定的 HTML、CSS、JavaScript、Vue CDN、Apps Script mock 與 Cloudflare Pages 驗收範圍。
本堂任務與驗收
完成可搜尋服務清單，資料變化時卡片、數量與空狀態同步更新。
- 能用 輸入後清單更新 留下可重現證據。
- 能用
computed結果 留下可重現證據。 - 能用 key 留下可重現證據。
- 能用 空狀態與 Vue 警告 留下可重現證據。
- Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
- 遇到問題時能先寫出症狀，再檢查一個最小假設。
官方延伸閱讀
正式延伸｜自主學習
把「Vue 反應式資料與清單渲染」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。
開啟自主學習入口｜4 個獨立 topic
- 先選一個 topic，讀懂成果、檔案與定位。
- 在自己的 Starter 檔案修改一小段。
- 重新載入，用畫面、Elements、Computed、Console 或文件留下證據。
建議第一個 topic：JavaScript .value 與 template 自動解包。
Learning map
- JavaScript .value 與 template 自動解包｜code-edit｜files/starter/main.js｜isRef=true、before=1、after=2、templateText=2
- ref 與 reactive 選擇｜code-edit｜files/starter/main.js｜queryIsRef/formIsReactive=true，queryAfter/emailAfter 正確
- computed 與 method｜code-edit｜files/starter/main.js｜computedRuns=1、methodRuns=2、兩者值皆4
- v-if／v-show 與穩定 key｜code-edit｜files/starter/index.html｜ifExistsAfter=false、showExistsAfter=true、showDisplay=none、stableIdentity=true