---
tags: Vue 直播班 - 2022 冬季班
---

# 第一堂：關注點分離

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

## Vue 作品實戰課程目標

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

## 課程專屬 API

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

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

## 課程學習說明

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

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

## Kata 挑戰抽抽抽

- [Kata 名單](/BFsTzGaWSK-7ftHIjms4DQ)

## 本堂課程知識點

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

### 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

## 2 ESModule

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

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

## 3 關注點分離

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

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

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

#### 使用 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

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      const { createApp } = Vue

      createApp({
        data() {
          return {
            message: 'Hello Vue!'
          }
        }
      }).mount('#app')
    </script>

2. ESModule

    <script type="module">
      import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

      createApp({
        data() {
          return {
            message: 'Hello Vue!'
          }
        }
      }).mount('#app')
    </script>

3. Vue Cli (ESModule)

2. 常見起手式
1. 建立基礎結構

    const { createApp } = Vue

2. createApp 建立

    const app({
        data() {
          return {
        //==建立空物件==
            temp:{},
        //==person帶入已宣告陣列資料 縮寫法 -> person:person==
            person
            
          }
        }
    })

3. mount 生成安裝

    creatApp(app).mount('#app')

3. View（畫面上的） 常用的指令
- {{ }}　

    <div>{{person.name}}</div>

- v-for　

    <div v-for="(item,key) in people">只有item時可去掉()</div>

- v-bind： //（‵Ｖ－‵指令）(v-bind:屬性)　

    <img v-bind:src="person,imgeUrl " >可加或不加{{}}

- v-on: -> 事件監聽 addEventListener　（‵Ｖ－‵指令）(v-on:屬性)

    <button type="button" v-on:click="temp = item" >(item 賦予給 temp)</button>

- v-if, v-else　

    <div v-if="temp.name">有temp.name資料時顯示這個</div>
    <div v-else="">當TEMP沒有資料的時候</div>

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

---

## 第一週作業

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

## 下週前預習章節

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