---
# System prepended metadata

title: 第四週
tags: [Vue 直播班 - 2022 冬季班]

---

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

# 第四週

## 學習提醒

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

兩個解決方式：https://www.facebook.com/groups/110635703123103/permalink/702325553954112/
- 透過筆記
- 透過拆解：
![](https://i.imgur.com/pggZigI.png)


## 本週作業提醒

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


## 下次上課時間

#### 加碼做作業

直播時間：1/15(日) 下午 13:00

時長：可能約 2 ~ 2.5 小時

#### 上週團隊任務

- https://bejewled-air-4cb.notion.site/6a66fd7e960e4027b57e78cb5ab2a971

## 本週課綱

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

### 什麼是元件？

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

原價屋：[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 下可以混大寫）
    - 常見錯誤：
        - v-for 一定要搭配 key
        - 大小寫運用


## 元件資料傳遞

為什麼要做資料傳遞
最終作業範例 ：[https://hexschool.github.io/vue-training-final-demo/#/](https://hexschool.github.io/vue-training-final-demo/#/)

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

- 元件上下傳遞
    - 上到下：props
    - 口訣：前面是名稱，後面是值
    注意：單向數據流、HTML 屬性一律是小寫、該資料如果不存在，則可能會導致內層出錯
    
- 下到上：$emit（托球）
    - 口訣：emit 推，外 methods 接收
    - 口訣：HTML 前內，後外
    
### 元件轉換原則

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


## 生命週期

元件生命週期

- 生命週期簡報
- 生命週期範例
- 生命週期的問題
    - 搭配 v-if 的問題 <keep-alive>
    - v-if, v-show
    - jQuery 為什麼抓不到元素

## 作業說明

- 本週作業：
    - <a href="https://rpg.hexschool.com/training/39/task?type=detail&id=373" target="_top">第四週主線任務：元件化</a>
- 團隊任務： 
    - https://rpg.hexschool.com/training/39/show?embedhm=
- 預習：
    - Pinia：https://courses.hexschool.com/courses/vue-2021211/lectures/49875681
    - Vite（第六週前）：https://courses.hexschool.com/courses/vue-202121/lectures/44165343
    - Router（第六週前）：https://courses.hexschool.com/courses/vue-202121/lectures/43289768
- 六角團隊提供的 Vite 模板（含 ESLint）：
    - https://github.com/hexschool/vite-template
