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

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

第1章 引言 002

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

1.1.1 從靜態(tài)走向動(dòng)態(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簡(jiǎn)介 009

1.3 Vue與React 010

1.3.1 虛擬DOM 010

1.3.2 功能性組件 011

1.3.3 輕量級(jí)—將與核心庫(kù)無(wú)關(guān)的業(yè)務(wù)封裝成獨(dú)立庫(kù) 011

1.3.4 視圖模板 012

1.3.5 其他 013

1.4 Vue與Angular 013

1.4.1 模板語(yǔ)法 013

1.4.2 臟檢測(cè) 014

1.4.3 雙向數(shù)據(jù)綁定 014

1.4.4 學(xué)習(xí)曲線 015

第2章 Vue基本介紹 016

2.1 安裝和引入 016

2.1.1 如何引入Vue.js 016

2.1.2 安裝Vue Devtools 017

2.2 Vue實(shí)例介紹 019

2.2.1 簡(jiǎn)單實(shí)例 019

2.2.2 生命周期 020

目錄



VIII

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

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

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

2.3.2 函數(shù)式編程 025

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

2.3.4 數(shù)據(jù)綁定視圖 027

第3章 Vue語(yǔ)法 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選項(xiàng) 060

4.1 常見選項(xiàng)及其用法 060

4.1.1 數(shù)據(jù)選項(xiàng)及其用法 060



IX

目 錄

4.1.2 屬性選項(xiàng)及其用法 065

4.1.3 方法選項(xiàng)及其用法 066

4.1.4 計(jì)算屬性及其用法 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 選項(xiàng)的優(yōu)先級(jí) 083

4.3 封裝復(fù)用 084

4.3.1 自定義指令 084

4.3.2 組件的注冊(cè) 088

4.3.3 混入的使用 089

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

5.1 組件服務(wù) 093

5.1.1 動(dòng)態(tài)組件 093

5.1.2 插槽 095

5.1.3 緩存組件 101

5.2 過(guò)渡效果 102

5.2.1 單節(jié)點(diǎn)的過(guò)渡 102

5.2.2 多節(jié)點(diǎn)的過(guò)渡 111

第6章 Vue項(xiàng)目化 115

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

6.1.1 Vue CLI簡(jiǎn)介115

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

6.1.3 項(xiàng)目目錄介紹 117

6.2 前端路由 120

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



6.2.2 Vue中的前端路由 124

6.3 狀態(tài)管理 131

6.3.1 對(duì)象引用 131

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

6.3.3 在項(xiàng)目中使用Vuex 136

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

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

7.1 項(xiàng)目規(guī)劃 144

7.1.1 需求分析 144

7.1.2 流程分析 146

7.2 項(xiàng)目展示 147

7.2.1 首頁(yè) 147

7.2.2 商品詳情 150

7.2.3 購(gòu)物車 151

7.2.4 訂單 152

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

8.1 項(xiàng)目構(gòu)建 154

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

8.1.2 Webpack是什么？ 155

8.1.3 Font Awesome圖標(biāo)庫(kù) 157

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

8.2.1 關(guān)于配置 159

8.2.2 動(dòng)態(tài)資源 162

8.2.3 動(dòng)態(tài)數(shù)據(jù)的存儲(chǔ) 163

8.3 自定義組件 164

8.3.1 幻燈片 164



8.3.2 復(fù)選框 168

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

9.1 響應(yīng)式設(shè)計(jì) 171

9.1.1 什么是響應(yīng)式設(shè)計(jì)的概念 171

9.1.2 媒體查詢 172

9.1.3 JavaScript布局 174

9.2 頁(yè)面開發(fā) 175

9.2.1 頁(yè)面切換 175

9.2.2 Swiper組件 176

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

9.3 多語(yǔ)種網(wǎng)站的建設(shè) 180

9.3.1 將一切納入配置 180

9.3.2 將配置綁定到視圖 183

第10章 我的掌上新聞 187

10.1 應(yīng)用介紹 187

10.1.1 應(yīng)用首屏 187

10.1.2 應(yīng)用首頁(yè) 188

10.1.3 新聞詳情頁(yè) 190

10.1.4 搜索頁(yè)面 191

10.1.5 搜索結(jié)果頁(yè) 194

10.2 項(xiàng)目構(gòu)建 194

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

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

第11章 SVG 畫圖板 200

11.1 SVG 簡(jiǎn)介 200

11.1.1 有關(guān)SVG的三個(gè)問(wèn)題 200

11.1.2 基本圖形的使用 202



11.1.3 SVG中的漸變 203

11.2 項(xiàng)目介紹 205

11.2.1 頁(yè)面介紹 205

11.2.2 代碼簡(jiǎn)析 209

附錄 拓 展 篇

附錄A Git入門 218

附錄B NPM入門 221

附錄C Webpack入門 224

附錄D 閉包和對(duì)象引用 230

附錄E 常見的ECMAScript 6語(yǔ)法 233