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

# 第一週 關注點分離(6/19)

請記得報到：https://js-training-1st.web.app/

## 本直播課程目標說明

- 完成一個電商網站
- 我們提供什麼資源
- 預期 [完成作品](https://www.notion.so/wcc723/2fbc7dc4df4846a386df4b69976e0237)

主線、支線、團隊作業說明：

### 應徵後勤組

透過助人的行為，加速技能的學習！
1. 後勤支援組
2. 幫幫忙組

後勤支援組做什麼？
- 協助影片分段落
- 攻略撰寫

幫幫忙組
- 作為小老師，解答同學間的問題

重點：**請一定要完成主線任務**

## 本週重點

- forEach
- 樣板字面值
- 關注點分離：資料先拆出來

## 開發環境介紹

- VSCode
- 套件：Live Server ⇒ https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
- Chrome 開發者工具
- Elements ⇒ 畫面除錯
- Console ⇒ 資料、語法除錯

## 學習關注點分離前的技術掌握

- 迴圈技巧：https://wcc723.github.io/javascript/2017/06/29/es6-native-array/
- ES6 樣板字面值：https://wcc723.github.io/javascript/2017/12/22/javascript-template-string/

## 關注點分離介紹

- 傳統麵條式語法
- 資料抽離的概念
- 範例說明
- 為什麼要學關注點分離

## 關注點分離實戰說明

- 使用關注點分離，完成 Todo List 的拆解觀念
- 使用關注點分離的概念，將 HTML 轉為互動式結構
- 使用關注點分離，將遠端資料渲染在畫面上

## 作業說明

- **主線任務（優先做）**：https://hackmd.io/F2N_naHkTFeJE0DDeI_OgA
- 團隊任務：https://hackmd.io/bPd9hnfITBqE8EgZ2O4XKQ
- 支線任務：https://hackmd.io/dfWtr8rISxCiOf55FJTGdg