Vue.js從入門到項目實戰(升級版)

 第一篇 概念篇——扎根於基礎 

第1章 引言 ···························································002

1.1 前端技術的發展 ···················································002

1.1.1 從靜態走向動態 ·······················································002

1.1.2 從後端走向前端 ·······················································003

1.1.3 從前端走向全端 ·······················································005

1.2 MVVM 族員—Vue.js ··········································008

1.2.1 從MVC到MVVM ···················································008

1.2.2 Vue.js簡介 ·····························································009

1.3 Vue與React ························································010

1.3.1 虛擬DOM ······························································010

1.3.2 功能性組件 ·····························································011

1.3.3 輕量級—將與核心庫無關的業務封裝成獨立庫 ·············011

1.3.4 視圖模板 ································································012

1.3.5 其他 ······································································013

1.4 Vue與Angular ·····················································013

1.4.1 模板語法 ································································013

1.4.2 臟檢測 ···································································014

1.4.3 雙向數據綁定 ··························································014

1.4.4 學習曲線 ································································015

第2章 Vue基本介紹 ···············································016

2.1 安裝和引入 ·························································016

2.1.1 如何引入Vue.js ·······················································016

2.1.2 安裝Vue Devtools ····················································017

2.2 Vue實例介紹 ······················································019

2.2.1 簡單實例 ································································019

2.2.2 生命周期 ································································020

目錄

VIII

Vue. js從入門到項目實戰（升級版） 

2.3 數據響應式原理 ···················································024

2.3.1 初識數據鏈 ·····························································024

2.3.2 函數式編程 ·····························································025

2.3.3 Vue中的數據鏈 ·······················································026

2.3.4 數據綁定視圖 ··························································027

第3章 Vue語法 ·····················································031

3.1 插值綁定 ····························································031

3.1.1 文本插值 ································································031

3.1.2 HTML插值 ····························································033

3.2 屬性綁定 ····························································034

3.2.1 指令v-bind ·····························································034

3.2.2 類名和樣式綁定 ·······················································035

3.3 事件綁定 ····························································038

3.3.1 指令v-on ·······························································038

3.3.2 常見修飾符 ·····························································040

3.3.3 按鍵修飾符 ·····························································042

3.3.4 組合修飾符 ·····························································043

3.4 雙向綁定 ····························································045

3.4.1 指令v-model ···························································045

3.4.2 v-model與修飾符 ·····················································048

3.4.3 v-model與自定義組件 ···············································050

3.5 條件渲染和列表渲染 ·············································052

3.5.1 指令v-if和v-show ···················································052

3.5.2 指令v-for ·······························································054

3.5.3 列表渲染中的key ·····················································059

第4章 Vue選項 ·····················································060

4.1 常見選項及其用法 ················································060

4.1.1 數據選項及其用法 ····················································060

IX

 目 錄

4.1.2 屬性選項及其用法 ····················································065

4.1.3 方法選項及其用法 ····················································066

4.1.4 計算屬性及其用法 ····················································068

4.1.5 偵聽屬性及其用法 ····················································072

4.2 DOM 渲染 ··························································074

4.2.1 指定被掛載元素 ·······················································074

4.2.2 視圖的字符串模板 ····················································075

4.2.3 渲染函數render ·······················································076

4.2.4 選項的優先級 ··························································083

4.3 封裝復用 ····························································084

4.3.1 自定義指令 ·····························································084

4.3.2 組件的註冊 ·····························································088

4.3.3 混入的使用 ·····························································089

第5章 Vue內置組件 ···············································093

5.1 組件服務 ····························································093

5.1.1 動態組件 ································································093

5.1.2 插槽 ······································································095

5.1.3 緩存組件 ································································101

5.2 過渡效果 ····························································102

5.2.1 單節點的過渡 ··························································102

5.2.2 多節點的過渡 ··························································111

第6章 Vue項目化 ···················································115

6.1 快速構建項目 ······················································115

6.1.1 Vue CLI簡介···························································115

6.1.2 使用Vue CLI構建項目 ·············································116

6.1.3 項目目錄介紹 ··························································117

6.2 前端路由 ····························································120

6.2.1 前端路由的簡單實現 ·················································121

6.2.2 Vue中的前端路由 ····················································124

6.3 狀態管理 ····························································131

6.3.1 對象引用 ································································131

6.3.2 狀態管理器Vuex ······················································132

6.3.3 在項目中使用Vuex ···················································136

 第二篇 實戰篇——提升於項目 

第7章 打造線上商城（一） ······································144

7.1 項目規劃 ····························································144

7.1.1 需求分析 ································································144

7.1.2 流程分析 ································································146

7.2 項目展示 ····························································147

7.2.1 首頁 ······································································147

7.2.2 商品詳情 ································································150

7.2.3 購物車 ···································································151

7.2.4 訂單 ······································································152

第8章 打造線上商城（二） ······································154

8.1 項目構建 ····························································154

8.1.1 目錄結構 ································································154

8.1.2 Webpack是什麽？ ····················································155

8.1.3 Font Awesome圖標庫 ················································157

8.2 動態資源和數據 ···················································159

8.2.1 關於配置 ································································159

8.2.2 動態資源 ································································162

8.2.3 動態數據的存儲 ·······················································163

8.3 自定義組件 ·························································164

8.3.1 幻燈片 ···································································164

8.3.2 復選框 ···································································168

第9章 企業官網的建設 ············································171

9.1 響應式設計 ·························································171

9.1.1 什麽是響應式設計的概念 ···········································171

9.1.2 媒體查詢 ································································172

9.1.3 JavaScript佈局 ························································174

9.2 頁面開發 ····························································175

9.2.1 頁面切換 ································································175

9.2.2 Swiper組件 ····························································176

9.2.3 劃分內容區 ·····························································177

9.3 多語種網站的建設 ················································180

9.3.1 將一切納入配置 ·······················································180

9.3.2 將配置綁定到視圖 ····················································183

第10章 我的掌上新聞 ··············································187

10.1 應用介紹 ··························································187

10.1.1 應用首屏 ······························································187

10.1.2 應用首頁 ······························································188

10.1.3 新聞詳情頁 ···························································190

10.1.4 搜索頁面 ······························································191

10.1.5 搜索結果頁 ···························································194

10.2 項目構建 ··························································194

10.2.1 項目結構 ······························································194

10.2.2 數據流圖 ······························································198

第11章 SVG 畫圖板 ················································200

11.1 SVG 簡介 ··························································200

11.1.1 有關SVG的三個問題 ··············································200

11.1.2 基本圖形的使用 ·····················································202

11.1.3 SVG中的漸變 ·······················································203

11.2 項目介紹 ··························································205

11.2.1 頁面介紹 ······························································205

11.2.2 代碼簡析 ······························································209

 附錄 拓 展 篇 

附錄A Git入門 ·······················································218

附錄B NPM入門 ····················································221

附錄C Webpack入門 ··············································224

附錄D 閉包和對象引用 ·············································230

附錄E 常見的ECMAScript 6語法 ······························233