Vue.js 學習筆記總整理
21 May 2017
這是我目前對於 Vue.js 的學習筆記，主要閱讀材料是官網（v2）和 Vue.js 權威指南（尚未讀完，會陸續補上），筆記範圍是開發環境建置、Vue Instance、模版語法（Directives）、元件（Components）和 Todo List 小範例等。
- 開發環境建置：「工欲善其事，必先利其器」，環境架設完畢才能好好做事。
- Vue.js 開發環境建置：Vue.js 的開發環境建置有以下幾種方法：使用 CDN 或下載後使用本機檔案、npm 安裝和使用 vue-cli，在這篇文章中會一一介紹，手把手完成。
- 使用 xpepermint 建立 Vue.js 專案：基本的開發環境建置完畢後，如果之後有進階版需求，可選擇自行定義樣版。世界上總有熱心的強者為我們建立一些好東西 - 這裡介紹一個可以快速建立 Vue.js + Node.js 的專案的自訂樣版 xpepermint，它提供了 server-side rendering、router、vuex store、form validation、i18n 與 l10n 等。
- 核心技術概念：虛擬節點（Virtual DOM）與雙向綁定（Two-way Binding）。
- Vue Instance
- Vue Instance：了解 Vue Instance、Instance Lifecycle、Hooks 與 Virtual DOM。
- Virtual DOM 概述：Vue.js 在 2.0 後的版本加入 Virtaul DOM。Virtual DOM 是以 JavaScript 物件模擬特定 DOM 結構而產生的樹狀結構。用途是不直接操作 DOM，而改操作這些物件。待一個段落後，再將這些變更更新回真實的 DOM 上，以期提升效能。
- 雙向綁定 Two-way Binding - 利用 Object.defineProperty 和 MutationObserver 實作雙向綁定：雙向綁定就是 (一)可以經由改變 model 的值而自動更新 DOM 的內容，並且 (二)經由改變 DOM 的內容而自動更新 model 的值。這篇文章會分這兩部份來實作，了解實作原理對於日後程式撰寫和偵錯是有很大幫助的。
- Vue Instance
- 模版語法 Directives
- data、v-model 與雙向綁定：如何利用 data 與
v-model實現雙向綁定？原理、語法與表單元件範例。 - 計算屬性 Computed：計算屬性 (Computed) 說明，並比較 computed、watch、method。
- Watch：Watch 可讓我們監視某個值，當這個值變動的時候，就去做某些事情。
- Method 與事件處理 (Event Handling)
- v-bind 屬性綁定、Class 與 Style 綁定
- Filter 過濾器：Filter 過濾器，並比較 Filter 和 Computed 的差異。
- 條件渲染 v-if、v-show：介紹 v-show 與 v-if，並比較兩者的差異。
- 列表渲染 v-for：介紹 v-for，並比較 v-for 與 v-if 的差異。
- v-cloak：使用 v-cloak 解決 Vue Instance 完成編譯前顯示變數的問題。
- 自定義指令 Custom Directive：Vue.js 提供自定義指令 (Custom Directive) 讓開發者直接從底層操作 DOM 物件。
- data、v-model 與雙向綁定：如何利用 data 與
- 元件 Components：每個 Vue.js 的應用程式都是從
Vue建構式（Vue Vonstructor）建立根實體（Root Vue Instance）開始，再一個個元件（Components）搭建上去而來的，透過元件的方式能讓開發者將程式碼封裝而更好重用。- Components 簡介 - 註冊與使用
- 元件溝通：為了共用程式碼，我們會將可重用的部份拆解為「元件」，而父子元件有可能必須溝通。父子元件溝通時，父層使用 Props Down 將資訊傳遞給子層，而子層透過 Events Up 的方式 (即
$emit) 將結果傳回父層。 - Mixins
- Slots
- 動態元件 Dynamic Components
- 樣式、漸變與動畫
- Todo List 範例：簡單實作一個 Todo List。功能含有新增 / 修改 / 刪除 todo、更新 todo 狀態、切換檢視模式、查看各檢視模式下的數量等。
- axios 與 axios-mock-adapter
推薦閱讀
列舉一些很棒的教材和工具。
