---
# System prepended metadata

title: '第一堂:關注點分離 課堂共筆'
tags: [Vue直播班 - 2022 冬季班]

---

---
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 體驗關注點分離

```javascript=
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