Vue.js前端開發(fā)技術(shù)

第1章 Vue入門　1
1．1　Vue簡(jiǎn)述　1
1．1．1　什么是Vue．js　1
1．1．2　為什么使用Vue．js　2
1．1．3　Vue．js的主要特點(diǎn)　2
1．1．4　Vue．js的優(yōu)勢(shì)　3
1．2　Vue．js的下載及使用　3
1．2．1　Vue．js下載　4
1．2．2　Vue．js引用　4
1．2．3　npm安裝　4
1．2．4　解讀Vue項(xiàng)目文件目錄結(jié)構(gòu)　8
1．3　實(shí)例化Vue對(duì)象、數(shù)據(jù)和方法　9
1．3．1　實(shí)例化Vue對(duì)象　9
1．3．2　Vue數(shù)據(jù)和方法　10
1．3．3　將數(shù)據(jù)掛載到DOM頁面　11
1．4　MVVM模式　13
本章小結(jié)　14
習(xí)題　15
第2章　Vue數(shù)據(jù)綁定　16
2．1　Vue模板語法　16
2．1．1　模板語法　16
2．1．2　插值　17
2．1．3　表達(dá)式　17
2．2　響應(yīng)式聲明渲染機(jī)制　18
2．2．1　響應(yīng)式聲明渲染機(jī)制簡(jiǎn)介　18
2．2．2　Vue屬性綁定　21
2．2．3　Vue雙向數(shù)據(jù)綁定　22
2．3　Vue計(jì)算屬性　24
2．3．1　計(jì)算屬性　24
2．3．2　計(jì)算屬性與methods的區(qū)別　27
2．4　Vue生命周期　28
2．4．1　Vue實(shí)例生命周期圖解　28
2．4．2　Vue生命周期詳解　29
2．4．3　Vue各生命周期適合開發(fā)的業(yè)務(wù)邏輯　31
本章小結(jié)　31
習(xí)題　32
第3章　Vue指令　33
3．1　Vue指令概述　33
3．1．1　指令　33
3．1．2　指令修飾符　34
3．2　Vue指令詳解　34
3．2．1　指令v-if　34
3．2．2　指令v-for　36
3．2．3　指令v-on　41
3．2．4　指令v-show　43
3．3　Vue動(dòng)態(tài)樣式綁定　46
3．3．1　v-bind指令屬性　46
3．3．2　v-bind綁定class　47
3．3．3　v-bind數(shù)組表達(dá)式綁定class屬性　48
3．3．4　v-bind對(duì)象語法綁定行內(nèi)樣式　49
3．3．5　v-bind數(shù)組語法綁定行內(nèi)樣式　50
3．4　Vue表單輸入綁定　51
3．4．1　指令v-model　51
3．4．2　v-bind在控件上綁定value　56
3．4．3　表單中的參數(shù)特性　63
3．5　綜合案例　64
本章小結(jié)　67
習(xí)題　67
第4章　Vue事件處理　68
4．1　Vue事件處理器　68
4．1．1　監(jiān)聽事件　68
4．1．2　方法事件處理器　69
4．1．3　內(nèi)聯(lián)事件處理器　70
4．2　修飾符　72
4．2．1　事件修飾符　72
4．2．2　按鍵修飾符　73
4．2．3　修飾鍵　77
4．3　綜合案例　77
本章小結(jié)　79
習(xí)題　79
第5章　Vue組件　80
5．1　組件的基本使用　80
5．1．1　什么是組件　80
5．1．2　組件使用　82
5．1．3　組件中的data必須是函數(shù)　88
5．2　Vue組件嵌套　90
5．2．1　組件嵌套　90
5．2．2　使用props　92
5．2．3　使用slot插槽內(nèi)容分發(fā)　101
5．2．4　組件實(shí)戰(zhàn)　107
5．3　組件通信　111
5．3．1　父組件向子組件通信　111
5．3．2　子組件向父組件通信　112
5．3．3　任意組件及平行組件通信　116
5．4　創(chuàng)建自己的組件　118
本章小結(jié)　123
習(xí)題　123
第6章　自定義指令　128
6．1　自定義指令概述　128
6．1．1　自定義全局指令　128
6．1．2　自定義局部指令　130
6．1．3　案例分析　131
6．2　鉤子函數(shù)　132
6．2．1　鉤子函數(shù)參數(shù)　133
6．2．2　函數(shù)簡(jiǎn)寫　136
6．3　對(duì)象字面量　136
本章小結(jié)　137
習(xí)題　137
第7章　過渡與動(dòng)畫　138
7．1　transition組件　138
7．2　單元素/組件的過渡　141
7．2．1　transition標(biāo)簽結(jié)合CSS樣式實(shí)現(xiàn)動(dòng)畫　141
7．2．2　animate．css結(jié)合transition實(shí)現(xiàn)動(dòng)畫　143
7．2．3　鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫　144
7．3　多個(gè)元素的過渡　147
7．4　多個(gè)組件的過渡　149
7．5　綜合案例　151
本章小結(jié)　156
習(xí)題　156
第8章　渲染函數(shù)　157
8．1　渲染函數(shù)概述　157
8．1．1　從虛擬DOM了解Vue渲染函數(shù)　157
8．1．2　為什么使用渲染函數(shù)　158
8．1．3　什么是渲染函數(shù)　159
8．2　createElement方法　161
8．2．1　createElement參數(shù)　161
8．2．2　VNodes必須唯一　166
8．3　使用JavaScript代替模板功能　167
8．3．1　v-if和v-for　167
8．3．2　v-model　168
8．3．3　slot插槽　170
8．3．4　作用域插槽　171
本章小結(jié)　172
習(xí)題　172
第9章　Vue路由vue-router　173
9．1　路由安裝和使用　173
9．2　傳遞參數(shù)及獲取參數(shù)　175
9．2．1　使用路由傳遞參數(shù)　175
9．2．2　地址欄傳遞參數(shù)　177
9．3　子路由　178
9．3．1　創(chuàng)建子路由　178
9．3．2　路由切換組件　180
9．4　命名視圖和導(dǎo)航鉤子　183
9．4．1　命名視圖　183
9．4．2　導(dǎo)航鉤子　185
9．5　元數(shù)據(jù)及路由匹配　188
本章小結(jié)　191
習(xí)題　192
第10章　使用webpack　193
10．1　webpack基礎(chǔ)　193
10．2　webpack的基本配置　196
10．3　webpack常用的Loaders　198
10．4　插件　201
10．5　webpack常用命令　204
本章小結(jié)　204
習(xí)題　204
第11章　綜合案例開發(fā)　205
11．1　綜合案例開發(fā)步驟　205
11．1．1　通過vue-cli構(gòu)建工具初始化項(xiàng)目目錄　205
11．1．2　初始化依賴包　206
11．1．3　安裝vue-router組件　206
11．1．4　創(chuàng)建router對(duì)象及配置路由　207
11．1．5　在App．vue中添加路由導(dǎo)航　208
11．2　解析Vue生成文件目錄結(jié)構(gòu)　210
11．2．1　build文件夾　210
11．2．2　config文件夾　210
11．2．3　node_modules文件夾　211
11．2．4　src文件夾　211
11．2．5　App．vue與main．js　211
11．3　vue-resource插件　212
11．4　實(shí)戰(zhàn)：?jiǎn)卧~本　216
11．4．1　展示單詞本　216
11．4．2　修改刪除單詞　217
11．4．3　添加單詞　221
本章小結(jié)　223
習(xí)題　223
第12章　Vue工程項(xiàng)目實(shí)戰(zhàn)　224
12．1　項(xiàng)目分析　224
12．2　工程化項(xiàng)目搭建　224
12．2．1　項(xiàng)目準(zhǔn)備工作　225
12．2．2　項(xiàng)目資源準(zhǔn)備　226
12．2．3　圖標(biāo)字體制作　230
12．2．4　項(xiàng)目目錄設(shè)計(jì)　232
12．2．5　模擬后臺(tái)數(shù)據(jù)（mock數(shù)據(jù)）　233
12．3　組件化開發(fā)　235
12．4　使用vue-resource調(diào)用后臺(tái)接口　247
12．4．1　理解后臺(tái)接口文檔　247
12．4．2　根據(jù)文檔調(diào)用接口　248
12．4．3　具體業(yè)務(wù)邏輯開發(fā)　249
12．5　項(xiàng)目打包　251
本章小結(jié)　252
習(xí)題　252