---
tags: Vue 直播班 - 2021 夏季班
---

# 第五堂：Vue JS 進階方法

報到碼：IeMlwH6H10ld

## 課程提醒

- 本週日加碼
- 第五週作業說明
- 下午至 16:00，伴你寫程式！

### 課程獎勵說明：

- 7/2 前 50%：超過 100 人挑戰成功，全班直播加碼授權一年
- 前完成課程報到 -> 第四週主線
- 7/9 前 60%：菁英班直播(兩個主題) + Kuro（Composition API, JS 核心觀念）
- 完成課程報到 -> 第六週主線 或 第五週主線 + 心得牆
- 7/9 前 80%：菁英班錄影(包含前一梯的菁英直播 3 個主題)
- 完成課程報到 -> 第七週主線 或 第六週主線 + 心得牆
- 100%：數位完賽獎狀 + 抽（008 天絕對看不完的 Vue.js 3.0 指南 3 本）
- 加碼獎勵：參加線上發表會前 5 名報到 + 發表者（008 天絕對看不完的 Vue.js 3.0 指南 一本）

## 第五週目標：

- [第五週主線任務：表單驗證](https://rpg.hexschool.com/training/18/task?type=detail&id=183)
- [團隊任務](https://hackmd.io/48giA5JYRlqTNrI5i3Ez4g)

下週前必要完成項目：安裝 Vue CLI - [教學影片](https://courses.hexschool.com/courses/vue-2021/lectures/31457473)

## 本週課綱

- 元件關聯進階方法
- $refs
- mitt
- watch
- 擴充套件
- Vue Router
- VeeValidation

## 元件關聯進階方法

$refs

- Vue JS DOM 操作取得技巧
- 元件方法操作
- 什麼是方法、什麼是屬性

watch

- 監聽數值
- 監聽 Props

mitt

- 跨組件通訊

## Vue 外部插件

載入方式：

- Web -> CDN
- Vue Cli -> NPM

啟用方式：

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

插件介紹：

- vue loading
- VeeValidation

### VeeValidation 知識點

表單驗證的問題：

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

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

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

表單工具攻略

[https://hackmd.io/FFv0a5cBToOATP7uI5COMQ](https://hackmd.io/FFv0a5cBToOATP7uI5COMQ)

## 第五週目標：

- [第五週主線任務：表單驗證](https://rpg.hexschool.com/training/18/task?type=detail&id=183)
- [團隊任務](https://hackmd.io/48giA5JYRlqTNrI5i3Ez4g)

下週前必要完成項目：安裝 Vue CLI - [教學影片](https://courses.hexschool.com/courses/vue-2021/lectures/31457473)

- node.js 官網(Node.js 可直接下載官網版本): https://nodejs.org/en/
- Vue Cli(請參考課程影音安裝): https://cli.vuejs.org/