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
推薦閱讀
列舉一些很棒的教材和工具。