---
# System prepended metadata

title: 第三堂：Vue 起步走，指令學起來
tags: [Vue 直播班 - 2021 夏季班]

---

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

# 第三堂：Vue 起步走，指令學起來

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


## 本週關鍵知識：

- Vue 環境介紹
- 指令集
- 物件傳參考特性及實戰範例

## Vue 的起手式，Vue 的運行概念及優先建立資料結構

- MVVM (View viewModel Model)
    - 關注點分離
    - 框架做什麼事？
        - This 如何運作的？
            - 資料與方法展開
            - 元件綁定到畫面上
        - Vue 開發者工具
- 起手式
    - Vue 與藍圖間的關係（取用藍圖的方法）
    - 插入資料集
    - 展現雙向綁定、關注點分離的特性
- 請一定要預先定義資料結構（確保觸發雙向綁定的機制）


## Vue 的指令集

[https://hackmd.io/@hexschool/S1DJeKTdL/%2FRhud3_1PR9qv1RJyMfwUmA](https://hackmd.io/@hexschool/S1DJeKTdL/%2FRhud3_1PR9qv1RJyMfwUmA)

- 如何閱讀指令文件，分類：
    - 渲染：綠色
    - 寫入：紅色
    - 方法操作：藍色
- Vue 初始化必須要知道的事情
    - 請務必先定義資料結構


一一介紹指令：

- v-bind
- v-model
- v-if, v-else
- v-on


特別需要注意的指令：

- v-for
- v-bind

## 物件傳參考的特性

物件傳參考的特性：https://courses.hexschool.com/courses/vue-2021/lectures/29558350


## 第三週任務

* <a href="https://rpg.hexschool.com/training/18/task?type=detail&id=181" target="_top">第三週主線任務：Vue.js 起步走</a>


## 課後建議學習章節

* <a href="https://courses.hexschool.com/courses/vue-2021/lectures/31155809" target="_blank">指令章節影片</a>
* <a href="https://courses.hexschool.com/courses/vue-2021/lectures/31862793" target="_blank">Option API 章節影片</a>
推薦觀看章節：Methods、Watch、Computed 運算基礎運用