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

# 第二週

## 課前說明

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

## 課綱核心

- 複習，指令
- Methods、Computed、Mounted 常見技巧
- Async Function

## 複習與指令

完成一個 CRUD 的範例

## Mounted、Computed

### Mounted

- 關於生命週期：https://cn.vuejs.org/guide/essentials/lifecycle.html
- 關於 Mounted 來說：
- 最常用到的生命週期
- 可以作為**初始化事件**（例如 Ajax 取得第一筆資料）
- 在此生命週期後，才能抓到 DOM 元素
- 可以重複使用

### Computed

- 自動監聽
- 可以產出一個新的結果，僅能讀取，不能寫入
- 主要用途為顯示在畫面上（HTML）
- 不能寫入其他的值

除此之外，還有…

- Watch
- WatchEffect 等方法

## Async Function

本課程會使用 Axios 套件進行呼叫

1. 為什麼要用 Promise、Async/Await（本課程都是以 Async/Await 為主
2. Async/Await 實戰運用方法
3. Async function 的錯誤處理
4. Vue 中使用 Async Function
1. onMounted 中使用
2. 主動呼叫

## 課程 API 串接

API 文件：https://todolist-api.hexschool.io/doc/

Cookie 文件：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie

## 作業

Todo List API

參考課程 API，完成 TodoList 串接：https://todolist-api.hexschool.io/doc/#/

- Level 1：完成所有功能的串接
- Level 2：嘗試套版，版型不限（單頁完成）

解答連結：

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

### 預告

最終任務：

- 設計稿：https://www.figma.com/design/MFSk8P5jmmC2ns9V9YeCzM/TodoList?node-id=0-1&t=KzEgeE3s3r6JIPh6-1
- CSS 範例：https://codepen.io/hexschool/pen/qBzEMdm
- 同時挑戰證書任務：
- [最終挑戰 - Todolist 新手證書任務](https://rpg.hexschool.com/#/tasks/12062289980169123704?preview=1)
- [最終挑戰 - Todolist API 整合證書任務](https://rpg.hexschool.com/#/tasks/12062289980139618730?preview=1)