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

# 第三週 Vue.js 起步走

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

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


連結說明：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
- 物件參考的解決辦法