---
tags: Vue 直播班 - 2021 夏季班
---

# 第二堂：This 與課程 API

## 開課提醒
1. 錄影
2. 點名，[報到](https://rpg.hexschool.com/training/18/calendar) Code：`VY8a6jRvOK7v`

## 本週關鍵知識：

- Axios / 非同步
- **API 說明**
- This
- 下週預告：Vue 的 createApp

## 主題一：非同步與 Axios

知識點：事件佇列

- JS 是屬於同步語言，基本上都是依序執行
- 但非同步的行為會先放在事件佇列內，等所有程式執行完後才執行

Promise

- 相對於 callback 結構來說，更易於學習
- 非同步程式碼更有一致的結構性
- then, catch 用法說明

關於 Promise 更多知識可參考：https://wcc723.github.io/development/2020/02/16/all-new-promise/

## 主題二：課程 API 說明

申請：[https://vue3-course-api.hexschool.io/](https://vue3-course-api.hexschool.io/)

- 為什麼要使用 API？
- 串接示範
- 驗證說明

小測驗：哪些 API 是後台？哪些 API 屬於前台

情境詢問：以下 API 可以在哪邊找到

- 用戶將一個品項加入購物車
- 管理者新增一個品項
- 管理者查看特定的訂單內容
- 用戶建立訂單
- 用戶結帳

## 主題三：關於 This

- this 的基本運作（每個函式作用域都有獨立的 this）
- 為什麼要學 this（代名詞概念）
- this 的實戰用法
- 進階：this 與箭頭函式的關係

## 下一節的預告：Vue CreateApp

- 示範 Vue 起手式
- Vue 與關注點分離的關係
- 示範 data、methods、created 的結構
- 請同學先著重在 “指令” 的練習

---

## 第二週作業

* <a href="https://rpg.hexschool.com/training/18/task?type=detail&id=180" target="_top">第二週主線任務：RESTful API 串接</a>

- [錄影課程 API 串接說明](https://courses.hexschool.com/courses/vue-2021/lectures/32196753)

## 下週前預習章節

- [*Vue 指令快速練習文件](https://hackmd.io/@hexschool/S1DJeKTdL/%2FRhud3_1PR9qv1RJyMfwUmA)
- [Vue 指令介紹](https://courses.hexschool.com/courses/vue-2021/lectures/31155809)