【Vue.js 學習筆記】
===

為了較為系統的學習 Vue 所以購買了 Udemy 上，六角學院的課程 - 《[Vue 出一個電商網站](https://www.udemy.com/vue-hexschool/)》，針對這門課程，做了個讀書筆記。

### [00. 目錄](/@CynthiaChuang/Vue-Study-Notes-Contents)

### [01. 相關資源與工具設置](/@CynthiaChuang/Vue-Study-Notes-Unit01)
- [Vue 官方文件](/@CynthiaChuang/Vue-Study-Notes-Unit01#Vue-官方文件)
- [開發工具](/@CynthiaChuang/Vue-Study-Notes-Unit01#開發工具)
- [網頁除錯工具](/@CynthiaChuang/Vue-Study-Notes-Unit01#網頁除錯工具)

### [02. 基礎 Vue 概述](/@CynthiaChuang/Vue-Study-Notes-Unit02)
- [應用程式建立](/@CynthiaChuang/Vue-Study-Notes-Unit02#應用程式建立)
- [雙向綁定的資料 與 MVVM 的概念](/@CynthiaChuang/Vue-Study-Notes-Unit02#雙向綁定的資料-與-MVVM-的概念)
- [v-bind 動態屬性指令](/@CynthiaChuang/Vue-Study-Notes-Unit02#v-bind-動態屬性指令)
- [v-for 動態產生多筆資料於畫面上](/@CynthiaChuang/Vue-Study-Notes-Unit02#v-for-動態產生多筆資料於畫面上)
- [使用 v-on 來操作頁面行為](/@CynthiaChuang/Vue-Study-Notes-Unit02#使用-v-on-來操作頁面行為)
- [預先定義資料狀態的重要性](/@CynthiaChuang/Vue-Study-Notes-Unit02#預先定義資料狀態的重要性)
- [透過修飾符，讓 v-on 操作更簡單](/@CynthiaChuang/Vue-Study-Notes-Unit02#透過修飾符，讓-v-on-操作更簡單)
- [:class 動態切換 className](/@CynthiaChuang/Vue-Study-Notes-Unit02#class-動態切換-className)
- [computed 運算功能](/@CynthiaChuang/Vue-Study-Notes-Unit02#computed-運算功能)
- [Vue 表單與資料的綁定](/@CynthiaChuang/Vue-Study-Notes-Unit02#Vue-表單與資料的綁定)
- [元件基礎概念](/@CynthiaChuang/Vue-Study-Notes-Unit02#元件基礎概念)
- [練習測驗 1： 基礎章節測驗](/@CynthiaChuang/Vue-Study-Notes-Unit02#練習測驗-1：-基礎章節測驗)

### [03. 製作一個 Todo List 來小試身手吧](/@CynthiaChuang/Vue-Study-Notes-Unit03)
- [套用版型及建立代辦事項列表的資料](/@CynthiaChuang/Vue-Study-Notes-Unit03#套用版型及建立代辦事項列表的資料)
- [刪除陣列上的特定資料](/@CynthiaChuang/Vue-Study-Notes-Unit03#刪除陣列上的特定資料)
- [製作頁籤分類的功能](/@CynthiaChuang/Vue-Study-Notes-Unit03#製作頁籤分類的功能)
- [雙擊修改資料內容](/@CynthiaChuang/Vue-Study-Notes-Unit03#雙擊修改資料內容)
- [刪除項目補充說明](/@CynthiaChuang/Vue-Study-Notes-Unit03#刪除項目補充說明)

### [04. 進階模板語法介紹](/@CynthiaChuang/Vue-Study-Notes-Unit04)
- [模板資料細節說明](/@CynthiaChuang/Vue-Study-Notes-Unit04#模板資料細節說明)
- [動態切換 ClassName 及 Style 多種方法](/@CynthiaChuang/Vue-Study-Notes-Unit04#動態切換-ClassName-及-Style-多種方法)
- [v-for 與其使用細節](/@CynthiaChuang/Vue-Study-Notes-Unit04#v-for-與其使用細節)
- [v-if 與其使用細節](/@CynthiaChuang/Vue-Study-Notes-Unit04#v-if-與其使用細節)
- [Computed 與 Watch](/@CynthiaChuang/Vue-Study-Notes-Unit04#Computed-與-Watch)
- [表單細節操作](/@CynthiaChuang/Vue-Study-Notes-Unit04#表單細節操作)
- [v-on 的頁面操作細節](/@CynthiaChuang/Vue-Study-Notes-Unit04#v-on-的頁面操作細節)
- [章節作業](/@CynthiaChuang/Vue-Study-Notes-Unit04#章節作業)

### [05. Vue 的生命週期](/@CynthiaChuang/Vue-Study-Notes-Unit05)
- [Vue 生命週期](/@CynthiaChuang/Vue-Study-Notes-Unit05#Vue-生命週期)
- [練習測驗 2：生命週期章節小測驗](/@CynthiaChuang/Vue-Study-Notes-Unit05#練習測驗-2：-生命週期章節小測驗)

### [06. Vue.js 元件](/@CynthiaChuang/Vue-Study-Notes-Unit06)
- [元件概念介紹](/@CynthiaChuang/Vue-Study-Notes-Unit06#元件概念介紹)
- [使用 x-template 建立元件](/@CynthiaChuang/Vue-Study-Notes-Unit06#使用-x-template-建立元件)
- [使用 function return 建構資料格式](/@CynthiaChuang/Vue-Study-Notes-Unit06#使用-function-return-建構資料格式)
- [props 基本觀念](/@CynthiaChuang/Vue-Study-Notes-Unit06#props-基本觀念)
- [props 使用上的注意事項](/@CynthiaChuang/Vue-Study-Notes-Unit06#props-使用上的注意事項)
- [props 型別及預設值](/@CynthiaChuang/Vue-Study-Notes-Unit06#props-型別及預設值)
- [emit 向外層傳遞事件](/@CynthiaChuang/Vue-Study-Notes-Unit06#emit-向外層傳遞事件)
- [Slot 元件插槽](/@CynthiaChuang/Vue-Study-Notes-Unit06#Slot-元件插槽)
- [使用 is 動態切換元件](/@CynthiaChuang/Vue-Study-Notes-Unit06#使用-is-動態切換元件)
- [元件 章節作業](/@CynthiaChuang/Vue-Study-Notes-Unit06#元件-章節作業)
- [測驗：Vue 元件測驗](/@CynthiaChuang/Vue-Study-Notes-Unit06#測驗：Vue-元件測驗)

### [07. JavaScript ES6](/@CynthiaChuang/Vue-Study-Notes-Unit07)
- [使用 let 與 const 宣告變數](/@CynthiaChuang/Vue-Study-Notes-Unit07#使用-let-與-const-宣告變數)
- [展開與其餘參數](/@CynthiaChuang/Vue-Study-Notes-Unit07#展開與其餘參數)
- [解構](/@CynthiaChuang/Vue-Study-Notes-Unit07#解構)
- [縮寫](/@CynthiaChuang/Vue-Study-Notes-Unit07#縮寫)
- [箭頭函式與傳統函式](/@CynthiaChuang/Vue-Study-Notes-Unit07#箭頭函式與傳統函式)
- [字串模板 Template String](/@CynthiaChuang/Vue-Study-Notes-Unit07#/@CynthiaChuang/Vue-Study-Notes-Unit07#字串模板-Template-String)
- [常用陣列方法](/@CynthiaChuang/Vue-Study-Notes-Unit07#常用陣列方法)
- [測驗 2： ES6 小測驗](/@CynthiaChuang/Vue-Study-Notes-Unit07#測驗-2：ES6-小測驗)

### [08. Vue 常用 API](/@CynthiaChuang/Vue-Study-Notes-Unit08)
- [使用 Extend 避免重複造輪子](/@CynthiaChuang/Vue-Study-Notes-Unit08#使用-Extend-避免重複造輪子)
- [Filter 自訂畫面資料呈現格式](/@CynthiaChuang/Vue-Study-Notes-Unit08#Filter-自訂畫面資料呈現格式)
- [無法寫入的資料，用 set 搞定他](/@CynthiaChuang/Vue-Study-Notes-Unit08#無法寫入的資料，用-set-搞定它)
- [Mixin 混合其它的元件內容](/@CynthiaChuang/Vue-Study-Notes-Unit08#Mixin-混合其它的元件內容)
- [使用 Directive 開發自己的互動 UI](/@CynthiaChuang/Vue-Study-Notes-Unit08#使用-Directive-開發自己的互動-UI)

### [09. Vue Cli 的建置與運作原理](/@CynthiaChuang/Vue-Study-Notes-Unit09)
- [為什麼要學 Vue Cli](/@CynthiaChuang/Vue-Study-Notes-Unit09#為什麼要學-Vue-Cli)
- [Vue Cli 2.x 與 Vue Cli 3.x 課程說明](/@CynthiaChuang/Vue-Study-Notes-Unit09#Vue-Cli-2.x-與-Vue-Cli-3.x-課程說明)
- [如何使用 Vue Cli](/@CynthiaChuang/Vue-Study-Notes-Unit09#如何使用-Vue-Cli)
- [Vue Cli 所產生的資料夾結構說明](/@CynthiaChuang/Vue-Study-Notes-Unit09#Vue-Cli-所產生的資料夾結構說明)
- [Webpack 腳本介紹 及 自定義環境變數](/@CynthiaChuang/Vue-Study-Notes-Unit09#Webpack-腳本介紹-及-自定義環境變數)
- [安裝套件在 Vue Webpack 中](/@CynthiaChuang/Vue-Study-Notes-Unit09#安裝套件在-Vue-Webpack-中)

### [10. Vue Router](/@CynthiaChuang/Vue-Study-Notes-Unit10)
- [使用 Vue Router 及配置路由文件](/@CynthiaChuang/Vue-Study-Notes-Unit10#使用-Vue-Router-及配置路由文件)
- [新增路由路徑及連結](/@CynthiaChuang/Vue-Study-Notes-Unit10#新增路由路徑及連結)
- [製作巢狀路由頁面](/@CynthiaChuang/Vue-Study-Notes-Unit10#製作巢狀路由頁面)
- [使用動態路由切換頁面 Ajax 結果](/@CynthiaChuang/Vue-Study-Notes-Unit10#使用動態路由切換頁面-Ajax-結果)
- [命名路由，同一個路徑載入兩個頁面元件](/@CynthiaChuang/Vue-Study-Notes-Unit10#命名路由，同一個路徑載入兩個頁面元件)
- [Vue Router 參數設定](/@CynthiaChuang/Vue-Study-Notes-Unit10#Vue-Router-參數設定)
- [自定義切換路由方法](/@CynthiaChuang/Vue-Study-Notes-Unit10#自定義切換路由方法)

### 11. Vue 出一個電商網站

### 12. Vue Cli 3.0

### 13. Vuex 管理大型網站資料狀態

### 14. 線上問答會實戰內容