總目標: 在 Day 24-27 熟練掌握 Vue.js 的各種模板語法，包括文本插值、屬性綁定、條件渲染、列表渲染、事件處理和表單綁定，并能結合使用修飾符。

• 所需資源:
  • Vue 3 官方文檔 (模板語法): https://cn.vuejs.org/guide/essentials/template-syntax.html
  • Vue 3 官方文檔 (條件渲染): https://cn.vuejs.org/guide/essentials/conditional.html
  • Vue 3 官方文檔 (列表渲染): https://cn.vuejs.org/guide/essentials/list.html
  • Vue 3 官方文檔 (事件處理): https://cn.vuejs.org/guide/essentials/event-handling.html
  • Vue 3 官方文檔 (表單輸入綁定): https://cn.vuejs.org/guide/essentials/forms.html
  • Day 21-23 創建并運行成功的 Vue 3 項目（作為實踐環境）。

---

Day 24: 基礎模板語法 - 插值與綁定 (~3 小時)

• 本日目標: 學習如何在模板中顯示數據（文本、HTML）以及如何將數據綁定到 HTML 元素的屬性上。

• 學習計劃:

  • 番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 文本插值 ({{ }}) 與 JavaScript 表達式。
    • 活動: 閱讀官方文檔“模板語法”部分關于文本插值的內容。在你的 Vue 項目中，修改 App.vue 或創建一個新組件，嘗試使用 {{ }} 顯示組件中的數據 (<script setup> 中的變量)。嘗試在插值中使用簡單的 JavaScript 表達式（如計算、三元運算符）。
    • 實踐: 在 <script setup> 中定義一個變量 message，在 <template> 中顯示 {{ message }}。定義 count 和 price，顯示 {{ count * price }}。
    • 休息: 短暫休息。

  • 番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 原始 HTML (v-html)。
    • 活動: 閱讀官方文檔“模板語法”部分關于 v-html 的內容。理解它的作用是將包含 HTML 標簽的字符串作為真實的 HTML 插入。重點理解并記住安全風險！
    • 實踐: 在 <script setup> 中定義一個包含 HTML 標簽的字符串 rawHtml = '<span>有 **加粗** 文字</span>'，使用 v-html="rawHtml" 顯示它。
    • 休息: 短暫休息。

  • 番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):

    • 內容: Attribute 綁定 (v-bind 或 :) - 基礎。
    • 活動: 閱讀官方文檔“模板語法”部分關于屬性綁定的內容。理解 v-bind 用于動態設置 HTML 屬性的值。學習其縮寫 :。
    • 實踐: 綁定 img 標簽的 src 屬性到一個變量。綁定 a 標簽的 href 屬性。綁定 button 的 disabled 屬性到一個布爾值變量。
    • 休息: 短暫休息。

  • 番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):

    • 內容: Attribute 綁定 (v-bind 或 :) - Class 與 Style 綁定。
    • 活動: 閱讀官方文檔中關于 Class 與 Style 綁定的詳細內容。理解如何通過對象和數組的方式動態綁定元素的 class 和 style。
    • 實踐: 根據條件綁定不同的 CSS class。動態綁定元素的顏色或字體大小 style。
    • 休息: 短暫休息。

  • 總結與回顧 (10-15 分鐘):

    • 回顧今天學習的四種基本模板顯示/綁定方式。
    • 確保理解 {{ }}, v-html, v-bind (:) 的用法和區別。
    • 檢查實踐代碼是否按預期工作。

---

Day 25: 條件渲染 (v-if, v-show) (~3 小時)

• 本日目標: 學習如何根據數據的真假來決定元素的顯示或隱藏。

• 所需資源: Vue 3 官方文檔 (條件渲染): https://cn.vuejs.org/guide/essentials/conditional.html

• 學習計劃:

  • 番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):

    • 內容: v-if, v-else。
    • 活動: 閱讀官方文檔“條件渲染”部分關于 v-if 和 v-else 的內容。理解它們是基于條件“銷毀/重建”DOM 元素。
    • 實踐: 定義一個布爾值變量 isLoggedIn，使用 v-if 顯示“歡迎回來”，使用 v-else 顯示“請登錄”。
    • 休息: 短暫休息。

  • 番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):

    • 內容: v-else-if。
    • 活動: 閱讀官方文檔關于 v-else-if 的內容。學習如何在多個條件之間進行選擇性渲染。
    • 實踐: 定義一個變量 userRole (如 ‘admin’, ‘editor’, ‘viewer’)，使用 v-if, v-else-if, v-else 根據角色顯示不同的內容或按鈕。
    • 休息: 短暫休息。

  • 番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):

    • 內容: v-show。
    • 活動: 閱讀官方文檔關于 v-show 的內容。理解 v-show 是通過 CSS 的 display 屬性來控制元素的顯示/隱藏，元素始終存在于 DOM 中。
    • 實踐: 定義一個布爾值變量 isLoading，使用 v-show="isLoading" 顯示一個加載中的指示器。
    • 休息: 短暫休息。

  • 番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):

    • 內容: v-if vs v-show。
    • 活動: 對比閱讀官方文檔中 v-if 和 v-show 的區別和使用場景建議。理解性能差異（v-if 開銷大，但切換成本低；v-show 初始開銷低，但切換成本高）。
    • 思考: 在哪些情況下應該優先使用 v-if？哪些情況下優先使用 v-show？
    • 休息: 短暫休息。

  • 總結與回顧 (10-15 分鐘):

    • 回顧 v-if, v-else-if, v-else, v-show 的用法。
    • 鞏固 v-if 和 v-show 的核心區別。
    • 嘗試將今天學到的條件渲染應用到昨天創建的實踐代碼中。

---

Day 26: 列表渲染 (v-for) (~3 小時)

• 本日目標: 學習如何使用 v-for 指令基于數組或對象列表渲染多個元素。

• 所需資源: Vue 3 官方文檔 (列表渲染): https://cn.vuejs.org/guide/essentials/list.html

• 學習計劃:

  • 番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):

    • 內容: v-for 渲染數組 (基礎)。
    • 活動: 閱讀官方文檔“列表渲染”部分關于 v-for 渲染數組的內容。學習基本語法 item in items。
    • 實踐: 在 <script setup> 中定義一個字符串數組 items = ['Apple', 'Banana', 'Orange']。在 <template> 中使用 v-for="item in items" 渲染一個 <li> 列表顯示這些水果名稱。
    • 休息: 短暫休息。

  • 番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):

    • 內容: v-for 渲染數組 (帶索引)。
    • 活動: 學習 v-for 帶索引的語法 (item, index) in items。理解 index 的作用。
    • 實踐: 修改上一步的列表，顯示每個水果的索引，例如 {{ index }}. {{ item }}。
    • 休息: 短暫休息。

  • 番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):

    • 內容: v-for 渲染對象、整數范圍、<template>。
    • 活動: 閱讀官方文檔中關于 v-for 渲染對象 (value, key, index)、整數范圍 (n in 10) 以及在 <template> 標簽上使用 v-for 的內容。
    • 實踐: 渲染一個對象的屬性列表。渲染一個從 1 到 5 的數字列表。在 <template> 標簽上使用 v-for 結合 v-if 實現復雜列表結構的渲染。
    • 休息: 短暫休息。

  • 番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):

    • 內容: key 的重要性。
    • 活動: 閱讀官方文檔中關于 key 屬性的重要性和作用。理解 key 用于給 Vue 一個提示，以跟蹤每個節點的身份，從而高效地更新虛擬 DOM。理解為什么不推薦使用索引作為 key (除非數據永不改變)。
    • 實踐: 在之前的 v-for 循環中添加 :key="item.id" (如果你的數據有唯一 ID) 或 :key="index" (如果暫時沒有唯一 ID，但理解其局限性)。嘗試移除 :key 或使用不合適的 key，觀察列表更新時的潛在問題 (雖然簡單示例可能不明顯)。
    • 休息: 短暫休息。

  • 總結與回顧 (10-15 分鐘):

    • 回顧 v-for 的各種用法和語法。
    • 重點鞏固 key 的作用和正確使用方式。
    • 嘗試結合 v-if 和 v-for 在列表中根據條件顯示/隱藏某些項。

---

Day 27: 事件處理 (v-on) 與表單綁定 (v-model) + 修飾符 (~3 小時)

• 本日目標: 學習如何響應用戶交互（事件）以及如何實現表單輸入和應用狀態之間的雙向綁定。掌握常用修飾符。

• 所需資源:

  • Vue 3 官方文檔 (事件處理): https://cn.vuejs.org/guide/essentials/event-handling.html
  • Vue 3 官方文檔 (表單輸入綁定): https://cn.vuejs.org/guide/essentials/forms.html

• 學習計劃:

  • 番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 事件處理 (v-on 或 @) - 基礎。
    • 活動: 閱讀官方文檔“事件處理”部分。學習 v-on 指令及其縮寫 @ 的用法。理解如何綁定事件到組件方法。
    • 實踐: 在 <script setup> 中定義一個方法 handleClick = () => { alert('按鈕被點擊了!'); }。在 <template> 中使用 @click="handleClick" 綁定到一個按鈕。
    • 休息: 短暫休息。

  • 番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 事件處理 - 參數與事件對象，修飾符 (.prevent, .stop)。
    • 活動: 閱讀官方文檔關于事件處理中傳遞參數和訪問原生事件對象 ($event) 的內容。學習 .prevent (阻止默認事件) 和 .stop (阻止事件冒泡) 修飾符。
    • 實踐: 嘗試在事件處理方法中接收并打印事件對象 $event。創建一個鏈接，使用 @click.prevent 阻止頁面跳轉。創建一個嵌套元素，使用 @click.stop 阻止內部元素的點擊事件冒泡到外部元素。
    • 休息: 短暫休息。

  • 番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 表單輸入綁定 (v-model) - 文本輸入。
    • 活動: 閱讀官方文檔“表單輸入綁定”部分。理解 v-model 用于在表單輸入元素和應用狀態之間創建雙向綁定。從文本輸入 <input type="text"> 和 <textarea> 開始學習。
    • 實踐: 在 <script setup> 中定義一個響應式變量 inputText = ref('')。使用 v-model="inputText" 綁定到一個 <input type="text">。在 <template> 中顯示 {{ inputText }}，觀察輸入框內容和顯示內容同步變化。對 <textarea> 進行相同的實踐。
    • 休息: 短暫休息。

  • 番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 表單輸入綁定 (v-model) - 復選框、單選按鈕、選擇框。
    • 活動: 閱讀官方文檔關于 v-model 在 <input type="checkbox">, <input type="radio">, <select> 上的用法。理解它們如何綁定到布爾值、數組或單個值。
    • 實踐: 綁定一個復選框到布爾值。綁定多個復選框到一個數組。綁定單選按鈕到一個值。綁定選擇框（單選和多選）到一個值或數組。
    • 休息: 短暫休息。

  • 番茄時鐘 5 (25 分鐘工作 + 5 分鐘休息):

    • 內容: v-model 修飾符 (.lazy, .number, .trim)。
    • 活動: 閱讀官方文檔關于 v-model 修飾符的內容。理解 .lazy (將 input 事件改為 change 事件)、.number (自動將輸入轉為數字) 和 .trim (自動去除首尾空白字符) 的作用。
    • 實踐: 對文本輸入使用 .lazy，觀察同步時機。對數字輸入使用 .number，檢查綁定變量的類型。對文本輸入使用 .trim，輸入帶空格的文本，觀察顯示結果。
    • 休息: 短短休息。

  • 總結與實踐 (10-15 分鐘):

    • 回顧事件處理和表單綁定的核心概念和常用指令。
    • 總結學習過的各種修飾符及其作用。
    • 實踐: 嘗試構建一個小表單，包含不同類型的輸入框，并使用 v-model 綁定數據，使用 @submit.prevent 阻止表單默認提交，并在提交時（點擊按鈕）打印綁定的數據。結合條件渲染和列表渲染，例如，根據復選框的狀態顯示/隱藏某些內容，或者根據輸入框過濾一個列表。

---

掌握檢查:

• 在 Day 27 結束時，你應該能夠：
  • 在模板中正確使用 {{ }} 和 v-html 顯示數據。
  • 使用 v-bind (:) 動態綁定元素的屬性、class 和 style。
  • 使用 v-if, v-else-if, v-else 和 v-show 控制元素的顯示/隱藏。
  • 使用 v-for 渲染數組或對象列表，并理解 key 的作用。
  • 使用 v-on (@) 綁定事件到方法，處理事件對象，并使用 .prevent 和 .stop 修飾符。
  • 使用 v-model 實現表單輸入元素的雙向綁定，并了解其在不同輸入類型上的用法。
  • 能夠使用 .lazy, .number, .trim 等 v-model 修飾符。
  • 嘗試將這些指令和修飾符結合起來解決一些簡單的界面交互問題。