Vue.js從入門到項目實戰(zhàn)（升級版）

第一篇 概念篇——扎根于基礎(chǔ)

第1章 引言 002

1.1 前端技術(shù)的發(fā)展 002

1.1.1 從靜態(tài)走向動態(tài) 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 輕量級—將與核心庫無關(guān)的業(yè)務封裝成獨立庫 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 雙向數(shù)據(jù)綁定 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從入門到項目實戰(zhàn)（升級版）

2.3 數(shù)據(jù)響應式原理 024

2.3.1 初識數(shù)據(jù)鏈 024

2.3.2 函數(shù)式編程 025

2.3.3 Vue中的數(shù)據(jù)鏈 026

2.3.4 數(shù)據(jù)綁定視圖 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 數(shù)據(jù)選項及其用法 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 渲染函數(shù)render 076

4.2.4 選項的優(yōu)先級 083

4.3 封裝復用 084

4.3.1 自定義指令 084

4.3.2 組件的注冊 088

4.3.3 混入的使用 089

第5章 Vue內(nèi)置組件 093

5.1 組件服務 093

5.1.1 動態(tài)組件 093

5.1.2 插槽 095

5.1.3 緩存組件 101

5.2 過渡效果 102

5.2.1 單節(jié)點的過渡 102

5.2.2 多節(jié)點的過渡 111

第6章 Vue項目化 115

6.1 快速構(gòu)建項目 115

6.1.1 Vue CLI簡介115

6.1.2 使用Vue CLI構(gòu)建項目 116

6.1.3 項目目錄介紹 117

6.2 前端路由 120

6.2.1 前端路由的簡單實現(xiàn) 121



6.2.2 Vue中的前端路由 124

6.3 狀態(tài)管理 131

6.3.1 對象引用 131

6.3.2 狀態(tài)管理器Vuex 132

6.3.3 在項目中使用Vuex 136

第二篇 實戰(zhàn)篇——提升于項目

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

7.1 項目規(guī)劃 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 項目構(gòu)建 154

8.1.1 目錄結(jié)構(gòu) 154

8.1.2 Webpack是什么？ 155

8.1.3 Font Awesome圖標庫 157

8.2 動態(tài)資源和數(shù)據(jù) 159

8.2.1 關(guān)于配置 159

8.2.2 動態(tài)資源 162

8.2.3 動態(tài)數(shù)據(jù)的存儲 163

8.3 自定義組件 164

8.3.1 幻燈片 164



8.3.2 復選框 168

第9章 企業(yè)官網(wǎng)的建設 171

9.1 響應式設計 171

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

9.1.2 媒體查詢 172

9.1.3 JavaScript布局 174

9.2 頁面開發(fā) 175

9.2.1 頁面切換 175

9.2.2 Swiper組件 176

9.2.3 劃分內(nèi)容區(qū) 177

9.3 多語種網(wǎng)站的建設 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 搜索結(jié)果頁 194

10.2 項目構(gòu)建 194

10.2.1 項目結(jié)構(gòu) 194

10.2.2 數(shù)據(jù)流圖 198

第11章 SVG 畫圖板 200

11.1 SVG 簡介 200

11.1.1 有關(guān)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