---
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 運算基礎運用