建立 ref 的兩種讀取語境。
現在要做：請在 main.js 的「ref and .value」完成：在 JavaScript 使用 .value，template 使用自動解包
貼上位置：main.js：ref and .value 區塊。
const keyword = ref("");預期結果：關鍵字與畫面同步。
驗收證據：main.js、輸入值與畫面。
卡住時先看這裡
常見錯誤：一次修改太多責任。
第一個檢查：只檢查目前指定的檔案與區塊。
LESSON-20 · starter
用 ref、computed、v-for 與 v-if 管理服務清單畫面
你會依序完成3個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。 這頁用 可觀察證據 和 anchor 指出下一個動作。
Starter3 個小成果
Checkpoint一個核心缺口
Solution4 個差異
開始前確認
這一頁的結果：入口頁可以開啟
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、style.css、main.js
本堂焦點：用 ref、computed、v-for 與 v-if 管理服務清單畫面
照這個順序做
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
不建立第二份可變清單。
現在要做：請在 main.js 的「computed」完成：以 computed 表示 filteredServices 派生資料
貼上位置：main.js：computed 區塊。
const filteredServices = computed(() => services.value.filter((item) => item.name.includes(keyword.value)));預期結果：搜尋時清單與數量同步。
驗收證據：畫面、Console 與 computed callback。
卡住時先看這裡
常見錯誤：一次修改太多責任。
第一個檢查：只檢查目前指定的檔案與區塊。
建立可預測清單與顯隱。
現在要做：請在 index.html 的「v-for key v-if v-show」完成：用穩定 id 當 key，比較 v-if 與 v-show
貼上位置：index.html：v-for key v-if v-show 區塊。
<li v-for="service in filteredServices" :key="service.id">{{ service.name }}</li>預期結果：Console 無 key 警告，空結果可見。
驗收證據：Elements、Console 與畫面狀態。
卡住時先看這裡
常見錯誤：一次修改太多責任。
第一個檢查：只檢查目前指定的檔案與區塊。
階段檔案
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
index.htmlP0 專章可執行入口。
這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>LESSON-20 starter</title><link rel="stylesheet" href="style.css"></head><body><main id="services-app" v-cloak><h1>Vue 反應式渲染</h1><label>搜尋 <input v-model.trim="keyword"></label><p>目前輸入：{{ keyword }}</p><p>TODO：加入 computed 清單、v-if／v-show 與穩定 key。</p></main><script src="https://unpkg.com/vue@3.5.40/dist/vue.global.js"></script><script src="main.js" defer></script></body></html>style.cssP0 專章樣式與狀態證據。
這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC",sans-serif;line-height:1.7;color:#17324d;background:#eef5f8}body>main,body>header,body>footer,main{width:min(100% - 2rem,760px);margin:1rem auto;padding:1rem}a{color:#155e75}button,input,textarea{font:inherit}button{padding:.65rem .9rem}input,textarea{display:block;width:100%;padding:.6rem}@media(max-width:390px){body>main,body>header,body>footer,main{width:min(100% - 1rem,760px)}}
[v-cloak]{display:none}:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}
main.jsP0 專章互動與 Console 證據。
這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
const {createApp,ref}=Vue;createApp({setup(){const keyword=ref("");return{keyword};}}).mount("#services-app");完成驗收
- 入口頁可以開啟
- 3 個 TODO 都已完成
- 能展示 輸入後清單更新、
computed結果、key、空狀態與 Vue 警告 - 留下入口網址、修改檔案、操作步驟、預期結果與實際觀察。
下一步
Starter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。