---
# System prepended metadata

title: 第一堂：關注點分離
tags: [Vue 直播班 - 2023 冬季班]

---

# 第一堂：關注點分離

## 開課提醒
1. 錄影
2. 將[書籤](https://rpg.hexschool.com/training/39/show)加入最愛


## Vue 作品實戰課程目標

- 熟悉 JavaScript 實戰技巧
- 掌握 Vue 3 技術
- 帶領每位同學完成：
    1. [屬於自己的獨立作品](https://works.hexschool.io/#/)
    2. [製作客製化專題作品](https://liberating-turtle-5a2.notion.site/2023-Vue-8eef78a100e04567ad3c6037e4b4612c)

## 課程專屬 API

本 API 將有助於學員完成屬於自己的獨立作品。

- 課程專屬 API：https://vue3-course-api.hexschool.io/
- API 文件：https://hexschool.github.io/vue3-courses-swaggerDoc/#/

## 課程學習說明

作業及挑戰
- 主線任務（**務必完成**）
- 每日任務
- 分組任務

學習資源
- 錄影課程
- 直播課程
- 課程 API
- 額外課程練習講義
- Discord 學習頻道（班級公告、交誼大廳、作業討論）

## 本堂課程知識點

- JavaScript 必學語法
- ESModule
- Vue 與關注點分離

![空白](https://hackmd.io/_uploads/SktIFVnw6.png)
過去原生JS的問題
* js裡面有 html html上也有html
* 資料沒有特別標示 (ex: const value = input.value)
![空白](https://hackmd.io/_uploads/By0IYN2Da.png)

在vue裡面的重要觀念
* 有資料/狀態的概念

在vue裡面與原生JS不同的點
* JS裡面只有函式，沒有監聽事件
* 監聽事件放在HTML上
* 把資料狀態獨立拉出來
* 使用函式操作資料，並反映到畫面上
* 不會放入 HTML在vue的JS當中(即不會在vue的JS當中看到渲染行為)

### 1 JavaScript 必學語法

#### 縮寫形式

> 哪邊會用到？大部分進階的 JS 開發都會使用縮寫的方式進行，而且在進入 Vite、Cli 以後，可能會有沒使用縮寫導致 Lint 工具不給過的狀況

- 什麼是縮寫？什麼是新增語法？
- ES6 中必學的縮寫技巧

#### 樣板字面值

> 哪邊會用到？現在不太會用傳統字串相接的手法，因為可讀性不佳，另外本段落介紹的表達式概念，會應用到所有的樣板語言工具

- 可參考：[https://wcc723.github.io/javascript/2017/12/22/javascript-template-string/](https://wcc723.github.io/javascript/2017/12/22/javascript-template-string/)
    - HTML 結構換行更容易
    - 純文字中插入變數超簡單
- **樣板字面值技巧**
    - 知識點： `${}` 內可以帶入任何可回傳的結果

#### 陣列方法

> 哪邊會用到？三大框架重點都在關注點分離，畫面交給框架處理，那麼資料的處理將會是交給開發者，因此資料處理的能力就大幅影響到框架的運用能力。

- forEach → 資料處理的技巧
    - 可參考：[https://wcc723.github.io/javascript/2017/06/29/es6-native-array/](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/)
    - 只要會 forEach 就能吃全部
    - 進階技巧：輕鬆掌握 map, filter

額外參考影片：https://www.youtube.com/watch?v=_vFuDQ_6Xt8
![空白](https://hackmd.io/_uploads/HJKLIB3DT.png)


## 2 ESModule

> 哪邊會用到？
> 1. JavaScript 模組化
> 2. Vue 的元件拆分管理

- 關鍵點：如何匯出影響如何匯入
- ESModule 在實戰中的運用情境
    - 預設匯出：單一模組、元件開發 (主要)
    - 具名匯出：函式庫、自訂方法集（運用到具名匯入）

![空白](https://hackmd.io/_uploads/Sy6r2SnDa.png)



## 3 關注點分離

> 關注點分離：可參考課前影片
> 常見的關注點分離：
> - 資料與畫面分離
> - 資料與方法分離

> 今天只著重在（不操作資料）：
> 1.建立資料
> 2.渲染畫面

> 什麼時候會用到？前端框架、後端均是套用此概念，掌握對於未來學習及開發相當有幫助

#### 使用 Vue.js 體驗關注點分離

```javascript=
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  
// app => Vue 實體
const app = createApp({
data() {
  return {
    person: '卡斯伯'
  }
}
});
// app.component...
app.mount('#app');
```

1. 如何載入 Vue.js
    1. CDN
    2. ESModule
    3. Vue Cli (ESModule)
2. 常見起手式
    1. 建立基礎結構
    2. createApp 建立
    3. mount 生成
3. View（畫面上的） 常用的指令
    - {{ }}
    - v-bind
    - v-for
    - v-on -> 事件監聽 addEventListener
    - v-if, v-else
    

表達式：https://www.youtube.com/watch?v=8hFY3D7z-fM
官方提供的另一種 import：https://vuejs.org/guide/quick-start#enabling-import-maps

---

## 第一週作業


* <a href="https://rpg.hexschool.com/training/39/task?type=detail&id=370" target="_top">第一週主線任務：關注點分離</a>
* 作業範例：https://hexschool.github.io/live-vue3-training-chapter-2023/


## 下週前預習章節

[錄影課程 API 串接說明](https://courses.hexschool.com/courses/vue-2021211/lectures/49875702) -> 至少申請完 API Path