本文件連結：https://hackmd.io/@hexschool/S1Jv19VYA

# 第一週

## 課前說明

- 課前影音 / 錄影回放：https://courses.hexschool.com/courses/enrolled/2574732
- 每日任務：Discord 上發布
- 討論頻道：https://discord.com/channels/801807326054055996/1258601572867379222
- 每週挑戰：
- 一～三週：HackMD 上繳交
- 最後一週作業：https://rpg.hexschool.com/#/training/12062289980134006991
- RPG 程式勇者：
- 課程捷徑
- 課程講義
- 最後一週作業繳交
- 提醒老師錄影

## Vite 基本概念

官網的安裝方式：https://vitejs.dev/guide/

可選方式：

✔ Project name: … vue-2024-week01
✔ Select a framework: › Vue
✔ Select a variant: › Customize with create-vue ↗

Vue.js - The Progressive JavaScript Framework

✔ 是否使用 TypeScript？ … 否
✔ 是否啟用 JSX 支援？ … 否
✔ 是否引入 Vue Router 進行單頁應用程式開發？ … 否
✔ 是否引入 Pinia 用於狀態管理？ … 否
✔ 是否引入 Vitest 用於單元測試 … 否
✔ 是否要引入一款端對端（End to End）測試工具？ › 不需要
✔ 是否引入 ESLint 用於程式碼品質檢測？ … 是
✔ 是否引入 Prettier 用於程式碼格式化？ … 是
✔ 是否引入 Vue DevTools 7 擴充元件以協助偵錯？（試驗性功能） … 皆可

- Vite 資料夾結構說明
- Vite 編譯正式版本說明
- Vite 部署說明

### 建立新檔案

- 建立一個新的 Vue File 來進行說明
- Vue File 包含 template, script, style
- ESModules 的運用

## 關注點分離

Vue.js 的關注點分離強調將視圖層 (UI) 與資料層 (Data) 分開。視圖層使用模板語法來描述界面，而資料層使用 `data` 物件管理狀態，並通過雙向數據綁定 (`v-model`) 使視圖和資料同步更新。這種分離提升了代碼的可維護性和重用性，使開發更高效。

將畫面轉變為資料：

<table>
  <thead>
    <tr>
      <th>代辦事項名稱</th>
      <th>到期日</th>
      <th>是否已完成</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>購買雜貨</td>
      <td>2024-07-30</td>
      <td>是</td>
    </tr>
    <tr>
      <td>完成報告</td>
      <td>2024-08-01</td>
      <td>否</td>
    </tr>
    <tr>
      <td>清理房間</td>
      <td>2024-07-28</td>
      <td>是</td>
    </tr>
    <tr>
      <td>計劃假期</td>
      <td>2024-08-05</td>
      <td>否</td>
    </tr>
    <tr>
      <td>處理稅務</td>
      <td>2024-08-10</td>
      <td>否</td>
    </tr>
  </tbody>
</table>

### Ref

- 基礎定義值的方式
- 取值、賦予值的方式
- 優點：
- 適用全部情境
- 缺點：
- 要打上 .value

### Reactive

- 可以用來定義物件
- 優點：
- 不用加上 .value
- 缺點：
- 不能重新賦予值
- 僅能用在物件型別

> 簡而言之：官方推薦 ref 到底就好了
>

## Vue 的指令集

https://hackmd.io/@hexschool/S1DJeKTdL/%2FRhud3_1PR9qv1RJyMfwUmA


1. View 常用的指令
1. 資料渲染在 HTML 的內容上
- {{ }}
2. 請套用在 HTML 的屬性上
- v-for （迴圈，類似 forEach）
- v-bind （HTML 屬性套用）
- v-on（addEventListener）
- v-if, v-else（if…else 判斷）
3. 雙向綁定
4. 觸發監聽
- Vue 初始化必須要知道的事情
- 請務必先定義資料結構

## 作業：

餐點管理工具

- Level 1：將菜單轉為資料格式
- Level 2：可以重新設定菜單的庫存數量
- Level 3（挑戰）：可以重新設定品項名稱

作業需求：

1. 將以下的表格轉為使用資料，並使用 Vue 進行渲染。
2. 數量的部分可以點擊，並且調整庫存數量。
3. 庫存數量不會低於 0。
4. 新增欄位 “編輯”，按下後可以修改該欄位的品項名稱（按下確認後執行更換）

<table>
  <thead>
    <tr>
      <th scope="col">品項</th>
      <th scope="col">描述</th>
      <th scope="col">價格</th>
      <th scope="col">庫存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>珍珠奶茶</td>
      <td><small>香濃奶茶搭配QQ珍珠</small></td>
      <td>50</td>
      <td><button>-</button>20<button>+</button></td>
    </tr>
    <tr>
      <td>冬瓜檸檬</td>
      <td><small>清新冬瓜配上新鮮檸檬</small></td>
      <td>45</td>
      <td><button>-</button>18<button>+</button></td>
    </tr>
    <tr>
      <td>翡翠檸檬</td>
      <td><small>綠茶與檸檬的完美結合</small></td>
      <td>55</td>
      <td><button>-</button>34<button>+</button></td>
    </tr>
    <tr>
      <td>四季春茶</td>
      <td><small>香醇四季春茶，回甘無比</small></td>
      <td>45</td>
      <td><button>-</button>10<button>+</button></td>
    </tr>
    <tr>
      <td>阿薩姆奶茶</td>
      <td><small>阿薩姆紅茶搭配香醇鮮奶</small></td>
      <td>50</td>
      <td><button>-</button>25<button>+</button></td>
    </tr>
    <tr>
      <td>檸檬冰茶</td>
      <td><small>檸檬與冰茶的清新組合</small></td>
      <td>45</td>
      <td><button>-</button>20<button>+</button></td>
    </tr>
    <tr>
      <td>芒果綠茶</td>
      <td><small>芒果與綠茶的獨特風味</small></td>
      <td>55</td>
      <td><button>-</button>18<button>+</button></td>
    </tr>
    <tr>
      <td>抹茶拿鐵</td>
      <td><small>抹茶與鮮奶的絕配</small></td>
      <td>60</td>
      <td><button>-</button>20<button>+</button></td>
    </tr>
  </tbody>
</table>

解答連結：

- 執行範例：https://www.casper.tw/2024-vue-homework/#/week1
- 原始碼：https://github.com/Wcc723/2024-vue-homework/blob/main/src/views/Week1View.vue
- 作業繳交連結：https://hackmd.io/O77_fHkGRnm8rPpMcOhh4g