商用網站架設實務

LESSON-22 · 零基礎學生教材

用 v-model、watch 與生命週期整理 Vue 表單狀態

完成 Vue 聯絡表單，四種狀態都能被操作與驗收，且 loading 結束後按鈕可恢復。

StarterCheckpointSolution

先理解：這堂課解決什麼問題？

聯絡表單需要同時處理輸入、載入、成功、失敗與重試，狀態若沒有規則會讓按鈕卡住。

本堂要完成：完成 Vue 聯絡表單，四種狀態都能被操作與驗收，且 loading 結束後按鈕可恢復。

學習邊界：先完成「用 v-model、watch 與生命週期整理 Vue 表單狀態」，不提前引入尚未教過的框架或建置工具。

先備知識與操作環境

本章專用教材只使用既定技術邊界。先開啟 examples/minimal.html，再依 Starter→Checkpoint→Solution 留下 v-model 值、disabled、loading/success/error 畫面、重試與 Console 證據。

  1. 檔案位置：先找到 contact.html、v-model、status、watch、onMounted、computed，再從本頁的最小實驗開始。
  2. 瀏覽器：開啟最小實驗與階段頁；每次修改後儲存並重新整理。
  3. DevTools：依本堂內容使用 Elements、Styles、Computed、Console 或 Network，記下第一個可觀察證據。
  4. 操作習慣：每次只修改一個檔案或一個責任，先預測、再操作、最後驗收。

先做最小實驗：先看見結果

這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。

開啟本堂最小實驗

  1. 入口：開啟 examples/minimal.html。
  2. 操作：開啟專章最小範例，以 Tab 完成一次操作，並比對畫面、Elements、Console 與 390px。
  3. 預期：畫面只呈現 v-model.trim／.number／.lazy、computed 與 watch 邊界、watch cleanup 與 onMounted、明確狀態轉移、aria-busy 與錯誤焦點 的本章責任，不出現跨章模板。
  4. 重設：重新整理 examples/minimal.html，不寫入正式資料也不執行正式部署。

學生練習流程

依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。

  1. 1

    最小實驗

    先閱讀本頁的問題、檔案地圖、名詞卡與最小例子。
  2. 2

    Step 2

    自己回答互動問答 4 題，再展開解析。
  3. 3

    最小實驗 2

    開啟最小實驗，實際操作一次並記下證據。
  4. 4

    Starter

    把 Starter 複製到自己的工作資料夾，照 3 張微步驟卡逐一完成；每一步都要看到結果再繼續。
  5. 5

    Checkpoint

    前往 Checkpoint，只處理 1 個本堂核心缺口；先預測，再用指定證據驗收。
  6. 6

    Solution

    前往 Solution，先看逐檔差異與修改原因，再決定要不要把完整內容帶回自己的檔案。
  7. 7

    變體驗收

    完成情境變體與獨立挑戰，留下檔案位置、操作、結果與驗收證據，並閱讀下一堂銜接：專案規劃：下一堂會先定義頁面、任務與驗收，再把技術串起來。

檔案地圖：每個位置負責什麼？

先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。

先學會這些詞

先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。

本堂 6 個詞先選一組，再展開需要的名詞卡；每次只保留目前的學習焦點。

表單繫定與觀察

3 個詞
v-model.trim／.number／.lazyv-model.trim／.number／.lazy 白話意思：用來理解「v-model.trim／.number／.lazy」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 v-model.trim／.number／.lazy 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 v-model.trim／.number／.lazy 或排查相關問題時。
最小範例
v-model.trim／.number／.lazy
可觀察證據
能在專章範例指出 v-model.trim／.number／.lazy 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。
computed 與 watch 邊界computed 與 watch 邊界 白話意思：用來理解「computed 與 watch 邊界」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 computed 與 watch 邊界 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 computed 與 watch 邊界 或排查相關問題時。
最小範例
computed 與 watch 邊界
可觀察證據
能在專章範例指出 computed 與 watch 邊界 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。
watch cleanup 與 onMountedwatch cleanup 與 onMounted 白話意思：用來理解「watch cleanup 與 onMounted」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 watch cleanup 與 onMounted 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 watch cleanup 與 onMounted 或排查相關問題時。
最小範例
watch cleanup 與 onMounted
可觀察證據
能在專章範例指出 watch cleanup 與 onMounted 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。

狀態與可存取性

1 個詞
明確狀態轉移、aria-busy 與錯誤焦點明確狀態轉移、aria-busy 與錯誤焦點 白話意思：用來理解「明確狀態轉移、aria-busy 與錯誤焦點」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 明確狀態轉移、aria-busy 與錯誤焦點 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 明確狀態轉移、aria-busy 與錯誤焦點 或排查相關問題時。
最小範例
明確狀態轉移、aria-busy 與錯誤焦點
可觀察證據
能在專章範例指出 明確狀態轉移、aria-busy 與錯誤焦點 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。

驗收與除錯

2 個詞
可觀察證據可觀察證據 白話意思：用來理解「可觀察證據」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 可觀察證據 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 可觀察證據 或排查相關問題時。
最小範例
可觀察證據
可觀察證據
能在專章範例指出 可觀察證據 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。
單一變因除錯單一變因除錯 白話意思：用來理解「單一變因除錯」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 單一變因除錯 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 單一變因除錯 或排查相關問題時。
最小範例
單一變因除錯
可觀察證據
能在專章範例指出 單一變因除錯 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。

最小例子：先看懂，再複製

這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。

​
<input v-model.trim="form.name">
<input v-model.number="form.budget">

Live Lab：逐段讀碼與驗證

每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。

  1. Step 1

    為姓名與預算選用 trim 與 number

    目的
    在輸入邊界正規化值。
    修改位置
    index.html
    為姓名與預算選用 trim 與 number
    預期結果
    姓名無首尾空白，預算為 number。
    驗收證據
    畫面值與 typeof。
    卡住先查
    只檢查目前指定的檔案與區塊。
  2. Step 2

    將派生訊息放 computed，副作用放 watch 並 cleanup

    目的
    避免 watch 內重複送出。
    修改位置
    main.js
    將派生訊息放 computed，副作用放 watch 並 cleanup
    預期結果
    改值只重置錯誤，不自動送出。
    驗收證據
    狀態轉移與 cleanup 程式。
    卡住先查
    只檢查目前指定的檔案與區塊。
  3. Step 3

    建立 idle to loading to success/error 與錯誤焦點

    目的
    讓 aria-busy、disabled、訊息來自同一狀態。
    修改位置
    main.js
    建立 idle to loading to success/error 與錯誤焦點
    預期結果
    四種狀態可重現，loading 會結束。
    驗收證據
    aria-busy、disabled、status 與 activeElement。
    卡住先查
    只檢查目前指定的檔案與區塊。
  4. Step 4

    修正錯誤後無法回 idle

    目的
    讓使用者修正輸入後重試。
    修改位置
    main.js
    修正錯誤後無法回 idle
    預期結果
    error to idle to loading to success 可重現。
    驗收證據
    status、aria-busy、disabled 與 focus。
    卡住先查
    只檢查目前指定的檔案與區塊。
  5. Step 5

    專章驗收：v-model.trim／.number／.lazy

    目的
    將概念轉成可重現的實作證據。
    修改位置
    examples/minimal.html 與對應 stage files
    操作 v-model.trim／.number／.lazy 並記錄結果。
    預期結果
    能展示 v-model.trim／.number／.lazy 的畫面、DOM、Console 或 Network 證據。
    驗收證據
    檔案位置、操作、預期、實際與重新驗證。
    卡住先查
    只重做一個最小操作並查看第一個錯誤。
  6. Step 6

    專章驗收：computed 與 watch 邊界

    目的
    將概念轉成可重現的實作證據。
    修改位置
    examples/minimal.html 與對應 stage files
    操作 computed 與 watch 邊界 並記錄結果。
    預期結果
    能展示 computed 與 watch 邊界 的畫面、DOM、Console 或 Network 證據。
    驗收證據
    檔案位置、操作、預期、實際與重新驗證。
    卡住先查
    只重做一個最小操作並查看第一個錯誤。
操作層級Live Lab 段落導覽：切換六個實驗步驟

讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。

互動問答

先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。

Q1概念理解 「v-model.trim／.number／.lazy」在本堂要解決什麼問題？ 本題線索：v-model.trim／.number／.lazy；回到名詞卡與 能在專章範例指出 v-model.trim／.number／.lazy 的操作結果。 展開解析收合解析

白話解析：

用來理解「v-model.trim／.number／.lazy」的實務概念。 正式來說，本章將 v-model.trim／.number／.lazy 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。

對照位置：

回到名詞卡「v-model.trim／.number／.lazy」，再看 能在專章範例指出 v-model.trim／.number／.lazy 的操作結果。

預期觀察：

你應該能用自己的話說出：實作 v-model.trim／.number／.lazy 或排查相關問題時。

常見錯誤：

不要只回答「它是v-model.trim／.number／.lazy」；那是重複名詞，不是說明責任。

立即驗證：

開啟 examples/minimal.html，依序做「開啟專章最小範例，以 Tab 完成一次操作，並比對畫面、Elements、Console 與 390px。」並記下畫面或工具證據。

Q2程式碼閱讀 修改指定規則後，你預測畫面會看到什麼？ 本題線索：index.html；要修改：為姓名與預算選用 trim 與 number；觀察：畫面值與 typeof。 展開解析收合解析

白話解析：

先看檔案責任，再預測結果。這一步的目的：在輸入邊界正規化值。

對照位置：

對照 Live Lab Step 1，位置是 index.html；範例內容：<input v-model.trim="form.name"> <input v-model.number="form.budget">

預期觀察：

姓名無首尾空白，預算為 number。

常見錯誤：

如果只改了檔案但沒有結果，先不要重寫全部；只檢查目前指定的檔案與區塊。

立即驗證：

實際操作後檢查 畫面值與 typeof。。

Q3概念比較 「v-model.trim／.number／.lazy」和「computed 與 watch 邊界」在本堂的責任有什麼不同？ 本題線索：比較 v-model.trim／.number／.lazy 與 computed 與 watch 邊界；操作位置：main.js 展開解析收合解析

白話解析：

v-model.trim／.number／.lazy：用來理解「v-model.trim／.number／.lazy」的實務概念。；computed 與 watch 邊界：用來理解「computed 與 watch 邊界」的實務概念。

對照位置：

對照兩張名詞卡的正式定義：本章將 v-model.trim／.number／.lazy 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。／本章將 computed 與 watch 邊界 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。

預期觀察：

你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。

常見錯誤：

不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。

立即驗證：

在 main.js 做「將派生訊息放 computed，副作用放 watch 並 cleanup」，再用 狀態轉移與 cleanup 程式。 比較前後差異。

Q4除錯驗收 如果完成操作後結果不對，你會先從哪一個證據開始查？ 本題線索：examples/minimal.html 與對應 stage files；第一個檢查位置：檔案位置、操作、預期、實際與重新驗證。 展開解析收合解析

白話解析：

先描述症狀，再提出一個最小假設。本堂常見錯誤是：只口頭說明完成。

對照位置：

對照最後一段 Live Lab：examples/minimal.html 與對應 stage files；檢查方式：只重做一個最小操作並查看第一個錯誤。

預期觀察：

你要能指出一個具體位置，而不是一次修改很多檔案。

常見錯誤：

不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。

立即驗證：

重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。

常見誤解

本堂任務與驗收

完成 Vue 聯絡表單，四種狀態都能被操作與驗收，且 loading 結束後按鈕可恢復。

官方延伸閱讀

正式延伸｜自主學習

把「Vue 表單資料與狀態轉移」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。

開啟自主學習入口｜4 個獨立 topic

你會怎麼做
  1. 先選一個 topic，讀懂成果、檔案與定位。
  2. 在自己的 Starter 檔案修改一小段。
  3. 重新載入，用畫面、Elements、Computed、Console 或文件留下證據。

建議第一個 topic：v-model.trim／.number／.lazy。

Learning map

  1. v-model.trim／.number／.lazy｜code-edit｜files/starter/index.html｜trimmed=David、numberType=number、lazyBefore=初始、lazyAfter=完成
  2. computed 與 watch 邊界｜code-edit｜files/starter/main.js｜computedValue=4/10、watchCount=1、externalWrites=1、computedWrites=0
  3. watch cleanup 與 onMounted｜code-edit｜files/starter/main.js｜activeId=watch-name-input、cleanupCount=1、staleRuns=0、finalTerm=ab
  4. 明確狀態轉移、aria-busy 與錯誤焦點｜code-edit｜files/starter/index.html｜sequence、busyDuring/disabledDuring、errorFocus、finalState 全部符合