---
tags: Vue 直播班 - 2022 冬季班
---

# 第五週

## **課程提醒**

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

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






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

- 2/24 **前 50%：超過 150 人挑戰成功，全班錄影直播加碼授權一年**
- ex: 前完成課程報到 -> 第四週主線
- 3/3 前 60%：菁英班直播一場 - 「Vue 思維與 React 思維」
- ex: 完成課程報到 -> 第五週主線 或 第四週主線 + 心得牆
- 3/3 前 80%：菁英班錄影(包含前一梯的菁英直播 6 個主題)
- ex: 完成課程報到 -> 第七週主線 或 第六週主線 + 心得牆
- 3/22 100%：數位完賽獎狀
- 加碼獎勵：完成專題並審核通過，加碼抽 （無痛提升 JavaScript 面試力：8 名）
- 加碼獎勵：參加線上發表會並發表者，送 Udemy 課程自選 (500 元以下) / 或自選網址一年約 (500 元以下)

### 加碼直播 - 第五週作業解說

直播時間：2/5(日) 下午 13:30

時長：可能約 2 小時

## 本週重點：

- 補充知識：
- JavaScript `Cannot read properties of undefined` 基本除錯技巧

- 元件關聯性的介紹
- $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
- Vue Cli -> 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

### Pinia

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

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

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

### VeeValidation 知識點

表單驗證的問題：

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

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

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

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

## 作業說明

- 本週作業：
- <a href="https://rpg.hexschool.com/training/33/task?type=detail&id=326" target="_top">第五週主線任務：購物車與表單驗證</a>
- 團隊任務：
- https://rpg.hexschool.com/training/33/show?embedhm=FX2Jj9XzSFitxduN2679RA
- 下週預習：
- Router 章節：https://courses.hexschool.com/courses/vue-202121/lectures/43289769
- 額外補充 Pinia 與 Vite：https://courses.hexschool.com/courses/vue-202121/lectures/44165391