---
# System prepended metadata

title: 第三週 Vue.js 起步走
tags: [Vue 實戰班]

---

---
tags: Vue 實戰班
---


# 第三週 Vue.js 起步走

## 最終作業目標及著作權說明

https://hexschool.github.io/vue-training-final-demo/#/

![](https://i.imgur.com/N2HbJda.png)

連結說明：https://www.notion.so/a4046e5d69134299bf221bae1056ae44

## 第三週目標
- 主線任務：https://hackmd.io/@hexschool/HJDbvkFqU/%2Fu4OmzgfESxCd3Nj2ah3NZA
- 支線挑戰：https://hackmd.io/@hexschool/HJDbvkFqU/%2FMWhzfEebTUKg0ao0VDqsnw
- 團隊任務：https://hackmd.io/@hexschool/HJDbvkFqU/%2FrJz5qnV0TKqesXCi_ryegQ

## Vue 起手式
- Vue 的插件
    - Chrome: [https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
- Vue 的文件
    - [https://cn.vuejs.org/v2/guide/](https://cn.vuejs.org/v2/guide/)
    - <script src="[https://cdn.jsdelivr.net/npm/vue/dist/vue.js](https://cdn.jsdelivr.net/npm/vue/dist/vue.js)"></script>
- 今天練習的文件：[https://hackmd.io/@hexschool/S1DJeKTdL/%2Fd-oyhhRoRPSvL1uoM1BGJw](https://hackmd.io/@hexschool/S1DJeKTdL/%2Fd-oyhhRoRPSvL1uoM1BGJw)


### 本週要點
- Vue 的起手式，Vue 的運行概念及優先建立資料結構
- Vue 的指令閱讀方式
- 未定義的資料與物件傳參考的特性


### Vue 的起手式，Vue 的運行概念及優先建立資料結構
- CDN
- MVVM
	- 關注點分離
	- 框架做什麼事？
		- This 如何運作的？
		- Vue 開發者工具如何運用
- 起手式
	- Vue 與藍圖間的關係
	- 插入資料集
	- 展現雙向綁定、關注點分離的特性
- 請一定要預先定義資料結構
	- 如果無法新增該怎麼辦？ this.$set
	- this.$set(資料, 目標屬性, 要寫入的資料)


### Vue 的指令


* 如何閱讀指令文件，分類：
	* 渲染：
	* 寫入：
	* 方法操作：

特別需要注意的指令：
- v-for
- v-bind


### 物件傳參考的特性

- 概觀、指令
    - 實作一個案例
    - v-for
- 物件參考的解決辦法