---
tags: Vue 實戰班
---

## 第四週目標

- 主線任務：https://hackmd.io/@hexschool/HJDbvkFqU/%2FkAZfOQkbRUOYaQbr58qDLw
- 團隊任務：https://hackmd.io/@hexschool/HJDbvkFqU/%2F7v0KRfEWRIm56whKigMnog

## 本週三大重點：

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

### 1. 建立元件

- 元件註冊 -> 兩種方式
- 全域註冊
- 區域註冊
- 模板運用
- Template Literial
- x-template `type="text/x-template"`
- Vue Cli Vue file （概念與 x-template 相同）
- 資料建構
- 必定使用 function return
- HTML 上的運用方式
- 標籤
- is 屬性
- 常見錯誤：
- 元件最外層需要是單一元素
- v-for 一定要搭配 key
- 元件命名規則：https://cn.vuejs.org/v2/guide/components-registration.html

### 2. 元件資料傳遞

- 兩大體系：全域傳遞、元件間傳遞
- 外到內 -> 資料
- 內到外 -> 事件
- 元件到元件 -> 事件
- 元件外到內傳遞（資料）
- 注意：
- 單向數據流
- HTML 屬性一律是小寫
- 元件內到外（事件）
- 使用 emit 發送
- 外層 methods 接收
- 全域（Event Bus）
- emit 發送
- bus 接收

### 元件生命週期

https://cn.vuejs.org/v2/guide/instance.html

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