LESSON-22 · starter
你會依序完成3個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：入口頁可以開啟
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、style.css、main.js
本堂焦點：用 v-model、watch 與生命週期整理 Vue 表單狀態
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：請在 index.html 的「v-model」位置完成：用 v-model 綁定姓名與需求欄位
貼上位置：index.html：v-model 區塊，先保留同一檔案的其他內容。
<input v-model="form.name" id="name" name="name"><textarea v-model="form.message" id="message" name="message"></textarea>預期結果：輸入文字後 Vue 狀態與畫面摘要同步。
驗收證據：輸入欄位、摘要文字與 Vue DevTools/DOM 結果。
常見錯誤：只讀 event.target.value，沒有建立 state。
第一個檢查：先對照 v-model 名稱與 setup 回傳值。
現在要做：請在 main.js 的「watch form.name」位置完成：用 watch 觀察姓名變更並更新狀態提示
貼上位置：main.js：watch form.name 區塊，先保留同一檔案的其他內容。
Vue.watch(() => form.name, (name) => {
statusMessage.value = name ? `已輸入 ${name.length} 個字` : "請輸入姓名";
});預期結果：輸入姓名後 status 顯示目前已填寫的字數。
驗收證據：畫面狀態、Console watch 訊息。
常見錯誤：用 watch 取代所有 computed。
第一個檢查：先看 watch 觀察的是哪個來源。
現在要做：請在 main.js 的「onMounted」位置完成：在 onMounted 設定初始表單提示
貼上位置：main.js：onMounted 區塊，先保留同一檔案的其他內容。
Vue.onMounted(() => {
statusMessage.value = "表單已準備好，可以開始輸入";
});預期結果：Vue 掛載後 status 出現初始提示。
驗收證據：畫面初始狀態與 Console。
常見錯誤：在 setup 外呼叫依賴 DOM 的程式。
第一個檢查：先確認 onMounted 從 Vue 取得且在 setup 內。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
index.html入口檔案：從這份 HTML 開始觀察本堂主題結果。style.css呈現層：只放本堂實作需要觀察的 CSS 規則。main.jsVue 行為：建立 CDN app、反應式資料與操作狀態。index.html入口檔案：從這份 HTML 開始觀察本堂主題結果。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue 3 基礎：表單、watch 與狀態流程</title>
<link rel="icon" href="../../../assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app" class="page-shell">
<p class="eyebrow">LESSON-22 · Vue 3 CDN</p>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
<!-- TODO-1：請在 index.html 的「v-model」位置完成：用 v-model 綁定姓名與需求欄位 -->
<!-- 尚未把表單欄位接到 Vue 狀態。 -->
<p id="status" class="status">{{ statusMessage }}</p>
<button id="action" type="button" @click="addService">新增服務</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="main.js" defer></script>
</body>
</html>style.css呈現層：只放本堂實作需要觀察的 CSS 規則。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.site-header { width: min(100% - 2rem, 920px); margin: 1rem auto 0; padding: .75rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .7rem; }
.site-header a { color: #155e75; }
.page-shell { width: min(100% - 2rem, 760px); margin: 2rem auto; padding: 2rem; border: 1px solid #cbd8e4; border-radius: 20px; background: #fff; }
.eyebrow { color: #176b87; font-weight: 800; }
.page-description { color: #52657d; }
.result-card { padding: 1rem; border: 1px solid #d8e0ea; border-radius: 14px; background: #fbfdff; }
button { padding: .65rem .9rem; border: 0; border-radius: 9px; background: #176b87; color: #fff; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #f1ab2c; outline-offset: 3px; }
.status { min-height: 2rem; color: #17643d; }
/* lesson-slot */
@media (max-width: 560px) { .site-header { align-items: flex-start; flex-direction: column; } .page-shell { margin: 1rem auto; padding: 1rem; } h1 { font-size: 1.6rem; } }main.jsVue 行為：建立 CDN app、反應式資料與操作狀態。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
const VueApi = window.Vue;
const app = VueApi.createApp({
setup() {
const title = VueApi.ref("Vue 3 基礎：表單、watch 與狀態流程");
const description = VueApi.ref("用 v-model、watch 與生命週期整理 Vue 表單狀態");
const services = VueApi.ref([{ name: "主要服務" }, { name: "定期維護" }]);
const serviceCount = VueApi.computed(() => services.value.length);
const statusMessage = VueApi.ref("尚未操作");
function addService() { services.value.push({ name: "新增服務" }); statusMessage.value = "目前服務數：" + services.value.length; }
// TODO-2：請在 main.js 的「watch form.name」位置完成：用 watch 觀察姓名變更並更新狀態提示
// 尚未讓表單輸入變更產生可觀察的 watch 副作用。
// TODO-3：請在 main.js 的「onMounted」位置完成：在 onMounted 設定初始表單提示
// 尚未在 Vue 掛載完成後建立初始狀態提示。
return { title, description, services, serviceCount, statusMessage, addService };
},
});
app.mount("#app");v-model 值、disabled、loading/success/error 畫面、重試與 ConsoleStarter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。