# 第四週

## 學習提醒

學的時候好像會，真的要自己做卻不知道如何著手
- 看範例作品都會寫，蓋起來就不會
- 老師直播時都懂，但要自己運用就卡卡的
- 寫完作業好像失憶一般，再寫一次也不一定有把握

兩個解決方式：
- 透過筆記
- 透過拆解

#### 還是不會做？加碼做作業

直播時間：1/27(六) 下午 13:00

時長：可能約 2 ~ 2.5 小時（第三週至第四週作業）

## 上週課後測驗

- 課後測驗：
- 測驗題：https://casper-wang.notion.site/6ddb21b62bb84dd6858418ab220e630e?pvs=4
- 回答位置：https://docs.google.com/spreadsheets/d/1mz3yb8wwM316llf4w9PoDlmeb0iMmuVxBZRmf_MzNvo/edit#gid=667492636

## 本週作業提醒

* [第四週主線任務：元件化](https://rpg.hexschool.com/training/39/task?type=detail&id=373)
* [團隊任務](https://rpg.hexschool.com/training/39/show?embedhm=oy-Onzm8RNCFtlEdxg0WKQ)

#### 上週團隊任務

- https://casper-wang.notion.site/6ddb21b62bb84dd6858418ab220e630e?pvs=4

## 本週課綱

* 建立元件
* 元件資料傳遞
* 生命週期

### 什麼是元件？

故事：漂亮阿姨電腦壞了，想請小明幫忙組一台新的

原價屋：[https://www.coolpc.com.tw/evaluate.php](https://www.coolpc.com.tw/evaluate.php)

商場上有賣個是零件：

- CPU、記憶體、主機板、鍵盤、滑鼠 → 都是元件
- 主機板與 CPU 的關係 → 同廠牌的才能相容
- Intel CPU 需對應 Intel 主機板
- AMD CPU 需對應 AMD 主機板
- CPU 與 主機板的傳輸 （主機板與 CPU 的資料傳輸） → 元件資料傳輸，資料傳輸不會跨元件
- 鍵盤插在 USB 孔上（鍵盤與主機板的資料傳輸）
- 螢幕透過 HDMI 插在顯示卡上（螢幕與顯卡的傳輸）
- 顯卡插在主機板上（顯卡與主機板的傳輸）

### 為什麼要使用元件？常見拆分原因：

- 程式碼太長
- 部分元件需要多次運用
- 邏輯拆分，不同的功能使用獨立的元件進行運作
- Vue Router 時，每個元件都是獨立頁面
- 元件內外層說明
- 元件註冊 -> 兩種方式
- 全域註冊
- 區域註冊 -> import 的手法
- 模板運用
- Template Literial
- x-template type=“text/x-template”
- (Vue Cli/Vite) Vue file （概念與 x-template 相同）
- 元件資料建構方式
- function return
- HTML 上的運用方式
- 標籤
- .html 一律小寫（Cli 下可以混大寫）
- [is](https://vuejs.org/api/built-in-special-attributes.html#is)，寫法為 `is="vue:my-row-component"`
- 常見錯誤：
- v-for 一定要搭配 key
- 大小寫運用

## 元件資料傳遞

為什麼要做資料傳遞
作業範例 ：https://hexschool.github.io/live-vue3-training-chapter-2023/week4/products.html


- 兩大體系：全域傳遞、元件間傳遞
- HTML 是兩者串接的橋樑

- 元件上下傳遞
- 上到下：props
- 口訣：前面是名稱，後面是值
注意：單向數據流、HTML 屬性一律是小寫、該資料如果不存在，則可能會導致內層出錯

- 下到上：$emit（托球）
- 口訣：emit 推，外 methods 接收
- 口訣：HTML 前內，後外

### 元件轉換原則

1. 先不要想著拆元件
2. 先不要急著拆元件
3. 試著拆元件，並確保功能與原本一致

拆元件的原則：
- 程式碼太長再拆（約超過 200 ~ 300）
- 可以重複使用的區塊

## 生命週期

元件生命週期

- 生命週期簡報
- 生命週期範例
- 生命週期的問題
- 搭配 v-if 的問題 <keep-alive>
- v-if, v-show
- jQuery 為什麼抓不到元素
- created vs mounted 的資料處理差異

## 作業說明

- 本週作業：
- <a href="https://rpg.hexschool.com/training/39/task?type=detail&id=373" target="_top">第四週主線任務：元件化</a>
- 團隊任務：
- https://rpg.hexschool.com/training/39/show?embedhm=oy-Onzm8RNCFtlEdxg0WKQ
- 課後測驗：
- 測驗題：https://casper-wang.notion.site/a8930614c2334a52bb28954be94f0b9f?pvs=4
- 回答位置：https://docs.google.com/spreadsheets/d/1mz3yb8wwM316llf4w9PoDlmeb0iMmuVxBZRmf_MzNvo/edit#gid=525116598
- 預習：
- 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/