商用網站架設實務

LESSON-20 · solution

Vue 3 CDN：響應式與條件／清單渲染

這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。

Starter3 個小成果
Checkpoint一個核心缺口
Solution4 個差異

開始前確認

這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。

會用到的檔案：index.html、style.css、main.js

本堂焦點：用 ref、computed、v-for 與 v-if 管理服務清單畫面

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

差異 1

先從既有 Vue.ref 狀態觀察 .value 與畫面更新的關係。

目的

先從既有 Vue.ref 狀態觀察 .value 與畫面更新的關係。

修改檔案

main.js

程式碼位置

services ref

現在要做：先對照差異，再檢查 在 main.js 的「services ref」對照這項變更：services.value.push({ name: "到府諮詢" }); statusMessage.value = "已加入一項服務"; console.log("services 是 ref：", services.value);

貼上位置：main.js 的 services ref 區塊

services.value.push({ name: "到府諮詢" });
statusMessage.value = "已加入一項服務";
console.log("services 是 ref：", services.value);

預期結果：執行入口操作後，服務資料與狀態訊息都反映新增結果。

驗收證據：畫面上的服務數量、status 與 Console 的 services.value。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 2

理解資料陣列和 template 重複渲染的關係。

目的

理解資料陣列和 template 重複渲染的關係。

修改檔案

index.html

程式碼位置

v-for

現在要做：先對照差異，再檢查 在 index.html 的「v-for」對照這項變更：<ul><li v-for="service in services" :key="service">{{ service }}</li></ul>

貼上位置：index.html 的 v-for 區塊

<ul><li v-for="service in services" :key="service">{{ service }}</li></ul>

預期結果：每筆服務各自出現，新增後不用手動複製 HTML。

驗收證據：Elements 顯示與資料數量一致的 li。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 3

區分來源狀態與由狀態計算出的結果。

目的

區分來源狀態與由狀態計算出的結果。

修改檔案

main.js

程式碼位置

computed serviceCount

現在要做：先對照差異，再檢查 在 main.js 的「computed serviceCount」對照這項變更：statusMessage.value = "computed 數量：" + serviceCount.value; console.log("computed serviceCount：", serviceCount.value);

貼上位置：main.js 的 computed serviceCount 區塊

statusMessage.value = "computed 數量：" + serviceCount.value;
console.log("computed serviceCount：", serviceCount.value);

預期結果：status 顯示由 serviceCount 推導出的數量，新增服務後可重新驗證。

驗收證據：畫面 status 與 serviceCount.value 的數字一致。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 4

讓 Vue 更新清單時能辨認每個項目。

目的

讓 Vue 更新清單時能辨認每個項目。

修改檔案

index.html

程式碼位置

v-for key

現在要做：先對照差異，再檢查 在 index.html 的「v-for key」對照這項變更：:key="service"

貼上位置：index.html 的 v-for key 區塊

:key="service"

預期結果：Console 沒有 v-for key 警告，新增項目仍正確。

驗收證據：Elements 清單與 Console。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 solution 的可執行入口

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 CDN：響應式與條件／清單渲染</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-20 · Vue 3 CDN</p>
  <h1>{{ title }}</h1>
  <p>{{ description }}</p>
  <ul><li v-for="service in services" :key="service">{{ service }}</li></ul>
:key="service"
  <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 CDN：響應式與條件／清單渲染");
    const description = VueApi.ref("用 ref、computed、v-for 與 v-if 管理服務清單畫面");
    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; }
    services.value.push({ name: "到府諮詢" });
statusMessage.value = "已加入一項服務";
console.log("services 是 ref：", services.value);
statusMessage.value = "computed 數量：" + serviceCount.value;
console.log("computed serviceCount：", serviceCount.value);
    return { title, description, services, serviceCount, statusMessage, addService };
  },
});
app.mount("#app");

完成驗收

下一步

Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。

回到 README，整理本堂證據並銜接下一堂