---
title: 第一堂:關注點分離 課堂共筆
tags: Vue直播班 - 2022 冬季班
---
###### tags: `2022 Vue直播班` `冬季班` `六角學院`

# 第一堂:關注點分離

* [上課講義](https://rpg.hexschool.com/training/33/show?embedhm=A7xW5AHpRcq3uLYaSQNBwQ)

## :rocket:本堂課程知識點

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

### :sparkles:1 JavaScript 必學語法

#### :arrow_forward:縮寫形式

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

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

#### :arrow_forward:樣板字面值

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

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

#### :arrow_forward:陣列方法

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

- 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

## :sparkles:2 ESModule

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

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

## :sparkles:3 關注點分離

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

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

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

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

import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.26/vue.esm-browser.min.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-for
- v-bind
- v-on -> 事件監聽 addEventListener
- v-if, v-else

表達式：https://www.youtube.com/watch?v=8hFY3D7z-fM

---

## :rocket:第一週作業

* <a href="https://rpg.hexschool.com/training/33/task?type=detail&id=322" target="_top">第一週主線任務：關注點分離</a>

## :rocket:下週前預習章節

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