**篇 概念篇——扎根于基礎(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è)務(wù)封裝成獨立庫 011

1.3.4 視圖模板 011

1.3.5 其他 012

1.4 Vue與Angular 013

1.4.1 模板語法 013

1.4.2 臟檢測 013

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

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

第2章 基本介紹 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ù)響應(yīng)式原理024

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

2.3.2 函數(shù)式編程 025

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

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

第3章 Vue語法 030

3.1 插值綁定030

3.1.1 文本插值 030

3.1.2 HTML插值 031

3.2 屬性綁定033

3.2.1 指令v-bind 033

3.2.2 類名和樣式綁定 034

3.3 事件綁定037

3.3.1 指令v-on 037

3.3.2 常見修飾符 039

3.3.3 按鍵修飾符 041

3.3.4 組合修飾符 042

3.4 雙向綁定044

3.4.1 指令v-model 044

3.4.2 v-model與修飾符 047

3.4.3 v-model與自定義組件 048

3.5 條件渲染和列表渲染050

3.5.1 指令v-if和v-show 050

3.5.2 指令v-for 053

3.5.3 列表渲染中的key 057

第4章 Vue選項 059

4.1 數(shù)據(jù)和方法059

4.1.1 數(shù)據(jù)選項 059



IX

目 錄

4.1.2 屬性選項 065

4.1.3 方法選項 067

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 封裝復(fù)用085

4.3.1 過濾器 085

4.3.2 自定義指令 086

4.3.3 組件的注冊 090

4.3.4 混入的使用 091

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

5.1 組件服務(wù)095

5.1.1 動態(tài)組件 095

5.1.2 使用插槽分發(fā)內(nèi)容 097

5.1.3 組件的緩存 103

5.2 過渡效果104

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

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

第6章 Vue項目化 117

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

6.1.1 Vue CLI簡介 117

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

6.1.3 項目目錄介紹 119

6.2 前端路由123



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

6.2.2 Vue中的前端路由 127

6.3 狀態(tài)管理132

6.3.1 對象引用 133

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

6.3.3 在項目中使用Vuex 138

第二篇 實戰(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圖標(biāo)庫 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 復(fù)選框 168

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

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

9.1.1 響應(yīng)式設(shè)計 171

9.1.2 媒體查詢 172

9.1.3 JS布局 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)站的建設(shè)179

9.3.1 將一切納入配置 180

9.3.2 將配置綁定到視圖 183

第10章 我的掌上新聞 186

10.1 應(yīng)用介紹186

10.1.1 應(yīng)用首屏 186

10.1.2 應(yīng)用首頁 187

10.1.3 新聞詳情 189

10.1.4 搜索頁面 190

10.1.5 搜索結(jié)果 193

10.2 項目構(gòu)建193

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

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

第11章 SVG畫圖板 199

11.1 SVG簡介 199

11.1.1 有關(guān)SVG的三個問題 199



11.1.2 基本圖形的使用 201

11.1.3 SVG中的漸變 202

11.2 項目介紹 204

11.2.1 頁面介紹 204

11.2.2 代碼簡析 208

附錄 拓 展 篇

附錄A Git入門 218

附錄B NPM入門 221

附錄C Webpack入門 224

附錄D 閉包和對象引用 230

附錄E 常見的ECMAScript 6語法 233