LESSON-19｜Vue 3 CDN：createApp、setup、mount

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

網站先需要一個可由瀏覽器直接開啟的 Vue 入口；本堂暫時只把靜態服務介紹交給 Vue 渲染，不先處理互動狀態。

本堂要完成：不使用 Vite，完成一個可由 CDN 載入、由 setup 提供資料並掛載到 #app 的 Vue 3 靜態最小應用。

學習邊界：先完成「用 Vue 3 CDN 建立 createApp、setup 與 mount 的最小流程」，不提前引入尚未教過的框架或建置工具。

第一次上課環境：先建立瀏覽器與 Vue 的共同語言

編輯器：只修改目前階段的 files/index.html、files/style.css 與 files/main.js；本堂不需要 npm、Vite 或 import。
瀏覽器：先開啟 examples/minimal.html，再依序開啟 Starter、Checkpoint、Solution 的 files/index.html；每次儲存後重新整理。
資源載入：Network 先確認固定的 Vue CDN，再確認 main.js；Console 的 development build 提示不是本堂錯誤。
DevTools：Elements 看唯一 #app 與實際文字；Console 執行 typeof Vue；Network 查看 CDN 與 main.js 的狀態碼與順序。

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

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

開啟本堂最小實驗

入口：開啟 examples/minimal.html。
操作：直接開啟 examples/minimal.html；先在 Network 找到 Vue CDN，再在 Elements 選取唯一的 #app，最後用 Console 執行 typeof Vue。
預期：畫面顯示實際 title、description 與完成訊息；Network 的 Vue CDN 成功，Console 的 typeof Vue 為 object，#app 內不保留大括號。
重設：重新整理 examples/minimal.html；不要把這份最小實驗改成期末專案。

第一個檢查位置：先確認開啟的是 examples/minimal.html，再依序檢查 Network 的 Vue CDN、Console 的 typeof Vue 與 Elements 的唯一 #app。
成功證據：畫面顯示實際 title、description 與完成訊息；Network 的 Vue CDN 成功，Console 的 typeof Vue 為 object，#app 內不保留大括號。若不同，先檢查：先確認開啟的是 examples/minimal.html，再依序檢查 Network 的 Vue CDN、Console 的 typeof Vue 與 Elements 的唯一 #app。

學生練習流程

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

1
最小實驗

先開啟 examples/minimal.html，在 Network 確認 Vue CDN，在 Console 執行 typeof Vue，再於 Elements 找唯一 #app。
2
名詞

回到名詞卡，依序說出 browser、HTML、script、CDN、global build、window、createApp、setup、return、template、插值與 mount 的白話意思。
3
Starter

把 Starter 複製到自己的工作資料夾，依序完成 CDN、setup／return、#app template 三張微步驟卡；每一步只改一個檔案責任。
4
Checkpoint

前往 Checkpoint，先觀察原始 {{ title }}，從 main.js 找到唯一的 CHECKPOINT-1，再只補上 app.mount("#app")。
5
Solution

前往 Solution，逐檔對照唯一 createApp、setup、return、mount 與兩個 script；用畫面、Elements、Console、Network、390px 與 Tab 完成驗收。
6
變體驗收

完成另一個服務型商家變體，保留靜態資料流程；ref、computed、v-for、v-if 與事件互動留到下一堂，並閱讀下一堂銜接：響應式渲染：下一堂才會使用 ref、computed、v-for 與 v-if 管理會改變的服務清單。

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

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

examples/minimal.html只讀最小實驗：完整示範 CDN → createApp → setup → return → mount 的靜態流程。
starter/files/index.htmlStarter HTML：故意缺少 Vue CDN 與 Vue template，讓學生依序補上。
starter/files/main.jsStarter JavaScript：保留 createApp 與 mount，等待學生補上 setup 與 return。
checkpoint/files/main.jsCheckpoint JavaScript：CDN、createApp、setup 與 return 完整，只留下 mount 缺口。
solution/files/index.htmlSolution HTML：唯一 #app、完整 Vue template 與位於容器外的兩個 script。
solution/files/main.jsSolution JavaScript：只有一個 createApp、setup、return 與 mount。

先學會這些詞

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

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

瀏覽器browser 白話意思：把 HTML、CSS 與 JavaScript 讀成可以看的網頁，並執行 Vue。展開查看正式定義、範例與驗收證據

正式定義: 解析文件、載入資源、建立 DOM，並在目前頁面執行 JavaScript 的用戶端軟體。
什麼時候用: 要開啟教材、觀察畫面或用 DevTools 找錯誤時。
最小範例: 用瀏覽器開啟 examples/minimal.html。
可觀察證據: 畫面、Elements、Console 與 Network 都是瀏覽器執行後的證據。
容易混淆: 和編輯器混淆；編輯器修改檔案，瀏覽器呈現與執行檔案。

HTMLHyperText Markup Language 白話意思：描述頁面內容與結構的文字語言。展開查看正式定義、範例與驗收證據

正式定義: 以元素與屬性描述文件結構，讓瀏覽器建立 DOM。
什麼時候用: 要放置 main、h1、p 或 Vue 的 #app 容器時。
最小範例: <main id="app"><h1>{{ title }}</h1></main>。
可觀察證據: Elements 能看到唯一的 #app 與其子元素。
容易混淆: 和 CSS 混淆；HTML 說明內容結構，CSS 說明外觀。

scriptscript element 白話意思：告訴瀏覽器要載入或執行 JavaScript 的 HTML 標籤。展開查看正式定義、範例與驗收證據

正式定義: HTML 用來嵌入或引用可執行腳本資源的元素。
什麼時候用: 要載入 Vue CDN 或自己的 main.js 時。
最小範例: <script src="main.js" defer></script>。
可觀察證據: Network 能看到請求，Console 能看到腳本執行結果。
容易混淆: 和 link 混淆；script 載入行為，link 通常載入 CSS。

CDNContent Delivery Network 白話意思：從網路提供可以直接使用的 Vue 程式。展開查看正式定義、範例與驗收證據

正式定義: 由分散式伺服器提供靜態資源的發布方式；本堂以 script 載入 Vue global build。
什麼時候用: 不使用 Vite、npm 或 import，仍要在 HTML 使用 Vue 3 時。
最小範例: <script src="${lesson21VueCdn}"></script>。
可觀察證據: Network 的 Vue 請求狀態為 200，Console 執行 typeof Vue 得到 object。
容易混淆: 和 npm 套件安裝混淆；CDN 是瀏覽器載入，不是本機建置工具。

Vue global buildVue global build 白話意思：透過 script 載入後，可以直接使用全域 Vue 物件的版本。展開查看正式定義、範例與驗收證據

正式定義: 將 Vue API 暴露在 window.Vue 上、可不使用 ES module import 的發布版本。
什麼時候用: 本堂使用 CDN、直接開啟 HTML，且還沒有 Vite 專案時。
最小範例: const VueApi = window.Vue;。
可觀察證據: Console 的 typeof Vue 為 object，main.js 能呼叫 VueApi.createApp。
容易混淆: 和 module build 混淆；global build 不需要 import。

windowWindow object 白話意思：目前瀏覽器分頁提供給 JavaScript 的全域物件。展開查看正式定義、範例與驗收證據

正式定義: 代表瀏覽器視窗或分頁執行環境的全域物件；CDN global build 會把 Vue 放在它上面。
什麼時候用: 需要確認外部 script 載入後提供了哪個全域名稱時。
最小範例: window.Vue === Vue。
可觀察證據: Console 讀取 window.Vue 不為 undefined。
容易混淆: 和 DOM 的 document 混淆；window 是執行環境，document 是目前頁面。

createAppcreateApp 白話意思：建立一個 Vue 應用程式的起點。展開查看正式定義、範例與驗收證據

正式定義: 從根元件選項建立 Vue application instance 的函式。
什麼時候用: 要讓一個 HTML 區域由 Vue 接手管理時。
最小範例: const app = VueApi.createApp({ setup() { return {}; } });。
可觀察證據: app 建立後仍未顯示；要等 mount 才接手 #app。
容易混淆: 和 mount 混淆；createApp 建立應用，mount 指定容器。

setupsetup function 白話意思：集中放置這個 Vue 應用要提供給畫面的資料與函式。展開查看正式定義、範例與驗收證據

正式定義: Composition API 的初始化函式；其回傳值可以在根 template 中使用。
什麼時候用: 要先提供靜態標題、說明或之後會使用的狀態時。
最小範例: setup() { const title = "安心維護服務"; return { title }; }。
可觀察證據: template 使用的名稱和 setup return 欄位一致。
容易混淆: 和 createApp 混淆；createApp 建立 app，setup 定義 app 要使用的資料。

returnreturn statement 白話意思：把函式內準備好的結果交出去。展開查看正式定義、範例與驗收證據

正式定義: 結束函式執行並把值交回呼叫端；Vue setup 的回傳物件會暴露給 template。
什麼時候用: setup 裡宣告資料，但 template 需要讀取它時。
最小範例: return { title, description };。
可觀察證據: 沒有 return 時，template 可能找不到預期名稱；有 return 時畫面出現實際文字。
容易混淆: 和宣告混淆；const 只是建立資料，return 才把資料交給外部。

templateVue template 白話意思：描述畫面要顯示哪些 HTML 與資料的樣板。展開查看正式定義、範例與驗收證據

正式定義: Vue 解析並轉換成 DOM 的模板內容；本堂使用直接寫在 #app 裡的 DOM template。
什麼時候用: 要把 setup 回傳的資料放進 HTML 畫面時。
最小範例: <h1>{{ title }}</h1>。
可觀察證據: Elements 的大括號不再原樣顯示，而是實際的 title 文字。
容易混淆: 和完整 HTML 文件混淆；template 是 Vue 接手範圍內的畫面描述。

插值interpolation 白話意思：用兩個大括號把資料放到畫面文字裡。展開查看正式定義、範例與驗收證據

正式定義: Vue template 使用 {{ expression }} 將可讀取的資料值渲染成文字。
什麼時候用: 標題、說明或狀態文字要來自 setup 資料時。
最小範例: <p>{{ description }}</p>。
可觀察證據: 畫面顯示 description 的值，而不是 {{ description }} 字串。
容易混淆: 和 JavaScript template literal 混淆；插值是 Vue template 的語法。

DOMDocument Object Model 白話意思：瀏覽器把 HTML 解析成 JavaScript 可以觀察的文件樹。展開查看正式定義、範例與驗收證據

正式定義: 代表目前文件節點、階層、屬性與文字狀態的程式介面。
什麼時候用: 要確認 Vue 實際接手了哪個元素，或畫面文字是否真的改變時。
最小範例: 在 Elements 選取 #app，查看它的子元素。
可觀察證據: Elements 中的 DOM 與畫面實際文字一致。
容易混淆: 和編輯器裡的原始 HTML 混淆；DOM 是瀏覽器目前執行後的結果。

mountmount 白話意思：把 Vue 應用接到頁面指定的元素，開始渲染。展開查看正式定義、範例與驗收證據

正式定義: 將 application instance 掛載到 DOM container 並啟動渲染的操作。
什麼時候用: createApp 與 setup 完成、準備讓 Vue 顯示在畫面上時。
最小範例: app.mount("#app");。
可觀察證據: #app 裡的大括號變成實際文字；沒有 mount 時會保留原始 template。
容易混淆: 和 DOM append 混淆；mount 啟動 Vue 管理，append 只加入 DOM 節點。

application instanceapplication instance 白話意思：createApp 建立出來、之後要 mount 的 Vue 應用物件。展開查看正式定義、範例與驗收證據

正式定義: 由 createApp 回傳、可設定並掛載到一個 DOM container 的應用實例。
什麼時候用: 要說明 const app 為什麼不是普通資料，而是接下來要 mount 的對象時。
最小範例: const app = VueApi.createApp({ ... }); app.mount("#app");。
可觀察證據: 同一個 app 只有一次 mount，且 mount 的 selector 對應 HTML 的 id。
容易混淆: 和 #app 混淆；app 是 JavaScript 應用，#app 是 HTML 容器。

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

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

<script src="https://unpkg.com/vue@3.5.40/dist/vue.global.js"></script>
<script src="main.js" defer></script>

// DevTools Console
typeof Vue

Live Lab：逐段讀碼與驗證

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

Step 1
先分清楚瀏覽器、CDN 與 Vue global build

目的
讓學生知道 HTML 是入口、CDN script 提供 Vue，而 main.js 要等 Vue 存在後才能呼叫 createApp。

修改位置
examples/minimal.html 的兩個 script 與 Console／Network
只確認 Vue CDN 在自己的 script 前面、檔案成功載入，這一步不先加入 ref、computed 或事件。

預期結果
Network 的 Vue CDN 與 main.js 成功，Console 的 typeof Vue 是 object，畫面仍由唯一的 #app 負責。

驗收證據
Network URL／狀態碼、Console 第一個錯誤與 typeof Vue 結果。

卡住先查
只確認目前開啟的入口與 Vue CDN script 順序，不同時修改其他檔案。
Step 2
把 Vue CDN 放進入口 HTML

目的
先讓瀏覽器取得 Vue，再讓後面的 main.js 有可以使用的全域 API。

修改位置
starter/files/index.html 的 body 結尾 script 區塊
在 main.js 前加入固定的 Vue global build CDN；兩個 script 都放在 #app 外。

預期結果
Network 看到 Vue CDN 與 main.js；重新整理後不再因為缺少 Vue 而停止。

驗收證據
Network 的兩個 script 請求、Console 第一個錯誤與 HTML 的 script 順序。

卡住先查
只查看 starter/files/index.html：Vue CDN 必須出現在 main.js 前面。
Step 3
用 setup 回傳普通資料給 template

目的
先把 createApp、setup、const、return 的責任拆開；反應式狀態延後到下一堂。

修改位置
starter/files/main.js 的 createApp 與 setup 區塊
在 setup 建立兩個普通字串，並用 return 交給 template；本堂不使用 ref、computed 或事件。

預期結果
main.js 的 setup return 欄位和 template 名稱一致；下一步補上 template 後會看見兩段實際文字。

驗收證據
main.js 的 const／return 與 Console 無 ReferenceError。

卡住先查
只搜尋 setup、title、description、return 四個位置。
Step 4
用唯一 #app 放入靜態 template

目的
把 Vue 應用的責任範圍固定下來，並觀察插值如何從 template 變成畫面文字。

修改位置
starter/files/index.html 的 main#app
在唯一的 #app 內加入 h1、p 與插值；保留 script 在 #app 外，並讓 selector 與 mount 完全一致。

預期結果
畫面顯示安心維護服務與說明文字；Elements 只看到一個 #app，Console 沒有錯誤。

驗收證據
Elements 的唯一 #app、畫面實際文字、main.js 的 app.mount selector。

卡住先查
逐字比對 HTML 的 id 與 app.mount 的 selector，先不要重寫整份檔案。
Step 5
在 Checkpoint 找出唯一 mount 缺口

目的
讓學生從原始大括號症狀回到 application instance 尚未接手 DOM 的根因。

修改位置
checkpoint/files/main.js 的 app 建立結尾
只在 main.js 最後補上 app.mount("#app")；不要複製第二個 createApp 或改 template。

預期結果
Checkpoint 重新整理後，原始 {{ title }} 不再出現，畫面顯示 setup 回傳的實際文字。

驗收證據
修正前後的 #app 內容、main.js 唯一的 mount 與 Console。

卡住先查
只搜尋 checkpoint/files/main.js 的 app.mount；註解不算執行碼。
Step 6
整合本堂驗收證據

目的
把前面完成的修改放回本堂任務，確認不是只修好單一畫面。

修改位置
examples/minimal.html 與本堂驗收證據
依序檢查 Network CDN 200、typeof Vue 為 object、唯一 #app、setup 回傳值正確渲染且 Console 無 Vue 執行錯誤，只記錄一個實際觀察，不新增本堂以外的技術。

預期結果
不使用 Vite，完成一個可由 CDN 載入、由 setup 提供資料並掛載到 #app 的 Vue 3 靜態最小應用。

驗收證據
Network CDN 200、typeof Vue 為 object、唯一 #app、setup 回傳值正確渲染且 Console 無 Vue 執行錯誤

卡住先查
先確認開啟的是 examples/minimal.html，再依序檢查 Network 的 Vue CDN、Console 的 typeof Vue 與 Elements 的唯一 #app。

操作層級Live Lab 段落導覽：切換六個實驗步驟

讀碼順序：先找入口，再用畫面、Elements、Console 與 Network 驗證；本堂依序確認 CDN、window.Vue、唯一 #app、setup return 與 mount，不以硬編碼文字假裝成功。

互動問答

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

Q1概念理解「瀏覽器（browser）」在本堂要解決什麼問題？本題線索：瀏覽器；回到名詞卡與畫面、Elements、Console 與 Network 都是瀏覽器執行後的證據。展開解析收合解析

白話解析：

把 HTML、CSS 與 JavaScript 讀成可以看的網頁，並執行 Vue。正式來說，解析文件、載入資源、建立 DOM，並在目前頁面執行 JavaScript 的用戶端軟體。

對照位置：

回到名詞卡「瀏覽器」，再看畫面、Elements、Console 與 Network 都是瀏覽器執行後的證據。

預期觀察：

你應該能用自己的話說出：要開啟教材、觀察畫面或用 DevTools 找錯誤時。

常見錯誤：

不要只回答「它是瀏覽器」；那是重複名詞，不是說明責任。

立即驗證：

開啟 examples/minimal.html，依序做「直接開啟 examples/minimal.html；先在 Network 找到 Vue CDN，再在 Elements 選取唯一的 #app，最後用 Console 執行 typeof Vue。」並記下畫面或工具證據。

Q2程式碼閱讀修改指定規則後，你預測畫面會看到什麼？本題線索：examples/minimal.html 的兩個 script 與 Console／Network；要修改：只確認 Vue CDN 在自己的 script 前面、檔案成功載入，這一步不先加入 ref、computed 或事件。；觀察：Network URL／狀態碼、Console 第一個錯誤與 typeof Vue 結果。展開解析收合解析

白話解析：

先看檔案責任，再預測結果。這一步的目的：讓學生知道 HTML 是入口、CDN script 提供 Vue，而 main.js 要等 Vue 存在後才能呼叫 createApp。

對照位置：

對照 Live Lab Step 1，位置是 examples/minimal.html 的兩個 script 與 Console／Network；範例內容：<script src="https://unpkg.com/vue@3.5.40/dist/vue.global.js"></script> <script src="main.js" defer></script> // DevTools Console typeof Vue

預期觀察：

Network 的 Vue CDN 與 main.js 成功，Console 的 typeof Vue 是 object，畫面仍由唯一的 #app 負責。

常見錯誤：

如果只改了檔案但沒有結果，先不要重寫全部；只確認目前開啟的入口與 Vue CDN script 順序，不同時修改其他檔案。

立即驗證：

實際操作後檢查 Network URL／狀態碼、Console 第一個錯誤與 typeof Vue 結果。。

Q3概念比較「瀏覽器」和「HTML」在本堂的責任有什麼不同？本題線索：比較瀏覽器與 HTML；操作位置：starter/files/index.html 的 body 結尾 script 區塊展開解析收合解析

白話解析：

瀏覽器：把 HTML、CSS 與 JavaScript 讀成可以看的網頁，並執行 Vue。；HTML：描述頁面內容與結構的文字語言。

對照位置：

對照兩張名詞卡的正式定義：解析文件、載入資源、建立 DOM，並在目前頁面執行 JavaScript 的用戶端軟體。／以元素與屬性描述文件結構，讓瀏覽器建立 DOM。

預期觀察：

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

常見錯誤：

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

立即驗證：

在 starter/files/index.html 的 body 結尾 script 區塊做「在 main.js 前加入固定的 Vue global build CDN；兩個 script 都放在 #app 外。」，再用 Network 的兩個 script 請求、Console 第一個錯誤與 HTML 的 script 順序。比較前後差異。

Q4除錯驗收如果完成操作後結果不對，你會先從哪一個證據開始查？本題線索：checkpoint/files/main.js 的 app 建立結尾；第一個檢查位置：修正前後的 #app 內容、main.js 唯一的 mount 與 Console。展開解析收合解析

白話解析：

先描述症狀，再提出一個最小假設。本堂常見錯誤是：重新建立第二個 app、把 mount 放進 setup，或只改畫面文字掩蓋真正缺口。

對照位置：

對照最後一段 Live Lab：checkpoint/files/main.js 的 app 建立結尾；檢查方式：只搜尋 checkpoint/files/main.js 的 app.mount；註解不算執行碼。

預期觀察：

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

常見錯誤：

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

立即驗證：

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

除錯對照表：由外往內，一次查一站

看到的症狀	第一個證據	先檢查什麼
Console 顯示 Vue is not defined	Network 的 Vue CDN／main.js	確認固定 Vue CDN 成功、位於 main.js 前，且 main.js 沒有先於 CDN 執行。
畫面保留 {{ title }}	main.js 與 Elements	確認 createApp 已建立、setup 已 return title，且 app.mount("#app") 是執行碼而不是註解。
畫面空白或 mount 相關錯誤	Elements 的 id 與 Console	逐字比對 HTML 的唯一 id="app" 與 JavaScript 的 app.mount("#app")。
畫面有結果但程式重複接管	檔案搜尋與 Elements	確認每份 main.js 只有一個 createApp、setup、mount，script 都在 #app 外。

常見誤解

看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
本堂只使用既定的 HTML、CSS、JavaScript、Vue CDN、Apps Script mock 與 Cloudflare Pages 驗收範圍。

本堂任務與驗收

不使用 Vite，完成一個可由 CDN 載入、由 setup 提供資料並掛載到 #app 的 Vue 3 靜態最小應用。

能用 Network CDN 200 留下可重現證據。
能用 typeof Vue 為 object 留下可重現證據。
能用唯一 #app 留下可重現證據。
能用 setup 回傳值正確渲染且 Console 無 Vue 執行錯誤留下可重現證據。
Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
遇到問題時能先寫出症狀，再檢查一個最小假設。

情境變體：將靜態服務介紹換成另一個服務型商家的品牌、標題與說明，保留同一個 CDN → createApp → setup → mount 順序。
獨立挑戰：不看 Solution，替另一個服務型商家改寫 title、description 與 status；保留 Vue CDN、唯一 #app、setup return 與 mount 的順序，提交 Network、Console、Elements 與窄版畫面證據。

官方延伸閱讀

下載講師版 Markdown：需要授課或離線查閱時使用，內容包含完整教學節奏。

Vue 3 CDN：createApp、setup、mount

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

第一次上課環境：先建立瀏覽器與 Vue 的共同語言

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

學生練習流程

最小實驗

名詞

Starter

Checkpoint

Solution

變體驗收

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

先學會這些詞

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

Live Lab：逐段讀碼與驗證

先分清楚瀏覽器、CDN 與 Vue global build

把 Vue CDN 放進入口 HTML

用 setup 回傳普通資料給 template

用唯一 #app 放入靜態 template

在 Checkpoint 找出唯一 mount 缺口

整合本堂驗收證據

互動問答

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

除錯對照表：由外往內，一次查一站

常見誤解

本堂任務與驗收

官方延伸閱讀

用 `setup` 回傳普通資料給 template

用唯一 `#app` 放入靜態 template

在 Checkpoint 找出唯一 `mount` 缺口