# 第五週

## **課程提醒**

- 本週六加碼
- 第 2 ~ 4 週作業說明
- 下午 13:30 開始，伴你寫程式！

感謝協助回覆問題的同學們

### **課程獎勵說明：**

- 2/8 **前 50%：超過 150 人挑戰成功，全班錄影加碼授權 6 個月**
- ex: 完成課程報到 -> 第四週主線
- 2/18 **前 60%：超過 120 人挑戰成功，全班錄影加碼授權 6 個月（可累加）**
- ex: 完成課程報到 -> 第五週主線

#### 上週課前測驗

- https://casper-wang.notion.site/a8930614c2334a52bb28954be94f0b9f?pvs=4
- https://docs.google.com/spreadsheets/d/1mz3yb8wwM316llf4w9PoDlmeb0iMmuVxBZRmf_MzNvo/edit#gid=525116598

## 本週重點：

- 元件關聯性的介紹
- $refs
- watch 延伸運用技巧
- 擴充套件
- vue loading
- Pinia
- VeeValidation

## 主題一：Vue 元件關聯性介紹

方法與屬性的介紹：

- $ 開頭為 Vue 的方法或屬性
- method() → 方法
- properties → 屬性

$refs
> 會用在哪？
> - Modal 封裝
> - DOM 元素選取
> - 參考：https://github.com/hexschool/live-vue3-dashboard-vite/blob/main/src/components/ProductModal.vue

- Vue JS DOM 操作取得技巧
- 元件方法操作

watch

- 監聽數值
- 監聽 Props

> 會用在哪？
> - 外部資料更新時
> - 參考：https://github.com/hexschool/live-vue3-dashboard-vite/blob/main/src/components/ProductModal.vue

## 主題二：擴充套件

引入外部套件，載入方式

- Web -> CDN
- Vite -> NPM

啟用方式：

- app.use() -> 啟用插件，給予 this 運用
- app.component() -> 透過元件的方式註冊

插件介紹：

- vue loading：讀取畫面
- 參考：https://ericacadu.github.io/panya/#/
- Pinia：跨元件狀態管理工具
- 參考：https://ericacadu.github.io/panya/#/
- VeeValidation：表單驗證工具
- 參考：https://ericacadu.github.io/panya/#/checkorder

### VeeValidation 知識點

表單驗證的問題：

- 規則複雜，一一導入很麻煩
- 許多套件僅支援英文
- 除了現有規則之外，還有自訂規則的需求
- 除了符合目前的規則之外，還要應對未知的需求

因為上述問題，所以表單工具...

- 簡單上手的不符合需求
- 符合需求的都很困難

表單工具攻略：[https://hackmd.io/FFv0a5cBToOATP7uI5COMQ](https://hackmd.io/FFv0a5cBToOATP7uI5COMQ)


### Pinia

> 為什麼要用 Pinia？
> 因為跨元件的狀態處理相當麻煩，又有許多元件需要統一管理狀態方法。

> Pinia 相對於 Vuex 有什麼好處？
> 一樣是官方支援，最大的差異是簡單易學。

Pinia CDN 版起手教學文件：[https://hackmd.io/gPZNP9r7QXqDOvS6UEgZxw](https://hackmd.io/gPZNP9r7QXqDOvS6UEgZxw)

## 作業說明

- 本週作業：
- <a href="https://rpg.hexschool.com/training/39/task?type=detail&id=374" target="_top">第五週主線任務：購物車與表單驗證</a>
- 作業範例：https://hexschool.github.io/live-vue3-training-chapter-2023/
- 團隊任務：
- https://rpg.hexschool.com/training/39/show?embedhm=xyKN41JoRcmMhaJkEoDGLA
- 課後測驗：
- 測驗題：https://casper-wang.notion.site/9ad0e973288743368c1b441b198976a2?pvs=4
- 回答位置：https://docs.google.com/spreadsheets/d/1mz3yb8wwM316llf4w9PoDlmeb0iMmuVxBZRmf_MzNvo/edit#gid=1397510807
- 預習：
- Pinia：https://courses.hexschool.com/courses/vue-2021211/lectures/49875681
- Vite（第六週前）：https://courses.hexschool.com/courses/vue-2021211/lectures/49875609
- Router（第六週前）：https://courses.hexschool.com/courses/vue-2021211/lectures/49875654
- 六角團隊提供的 Vite 模板（含 ESLint）：
- Standard 風格（較易）：https://github.com/hexschool/vite-template
- Airbnb 風格（具挑戰性）：https://github.com/hexschool/vite-template/tree/airbnb
- 作業範例：https://hexschool.github.io/live-vue3-training-chapter-2023/