Vue.js從入門到項(xiàng)目實(shí)戰(zhàn)

第一篇 概念篇——扎根于基礎(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簡介 009
1.3 Vue與React 010
1.3.1 虛擬DOM 010
1.3.2 功能性組件 011
1.3.3 輕量級(jí)——將與核心庫無關(guān)的業(yè)務(wù)封裝成獨(dú)立庫 011
1.3.4 視圖模板 011
1.3.5 其他 012
1.4 Vue與Angular 013
1.4.1 模板語法 013
1.4.2 臟檢測(cè) 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實(shí)例介紹 019
2.2.1 簡單實(shí)例 019
2.2.2 生命周期 020
目錄
VIII
Vue. js從入門到項(xiàng)目實(shí)戰(zhàn)
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ù)綁定視圖 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選項(xiàng) 059
4.1 數(shù)據(jù)和方法059
4.1.1 數(shù)據(jù)選項(xiàng) 059
IX
目 錄
4.1.2 屬性選項(xiàng) 065
4.1.3 方法選項(xiàng) 067
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ù)用085
4.3.1 過濾器 085
4.3.2 自定義指令 086
4.3.3 組件的注冊(cè) 090
4.3.4 混入的使用 091
第5章 Vue內(nèi)置組件 095
5.1 組件服務(wù)095
5.1.1 動(dòng)態(tài)組件 095
5.1.2 使用插槽分發(fā)內(nèi)容 097
5.1.3 組件的緩存 103
5.2 過渡效果104
5.2.1 單節(jié)點(diǎn)的過渡 104
5.2.2 多節(jié)點(diǎn)的過渡 113
第6章 Vue項(xiàng)目化 117
6.1 快速構(gòu)建項(xiàng)目117
6.1.1 Vue CLI簡介 117
6.1.2 使用Vue CLI構(gòu)建項(xiàng)目 118
6.1.3 項(xiàng)目目錄介紹 119
6.2 前端路由123
6.2.1 前端路由的簡單實(shí)現(xiàn) 123
6.2.2 Vue中的前端路由 127
6.3 狀態(tài)管理132
6.3.1 對(duì)象引用 133
6.3.2 狀態(tài)管理器Vuex 133
6.3.3 在項(xiàng)目中使用Vuex 138
第二篇 實(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 首頁 147
7.2.2 商品詳情 150
7.2.3 購物車 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)庫 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 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 項(xiàng)目構(gòu)建193
10.2.1 項(xiàng)目結(jié)構(gòu) 193
10.2.2 數(shù)據(jù)流圖 198
第11章 SVG畫圖板 199
11.1 SVG簡介 199
11.1.1 有關(guān)SVG的三個(gè)問題 199
11.1.2 基本圖形的使用 201
11.1.3 SVG中的漸變 202
11.2 項(xiàng)目介紹 204
11.2.1 頁面介紹 204
11.2.2 代碼簡析 208
附錄 拓 展 篇
附錄A Git入門 218
附錄B NPM入門 221
附錄C Webpack入門 224
附錄D 閉包和對(duì)象引用 230
附錄E 常見的ECMAScript 6語法 233