Vue.js前端開發(fā)實(shí)戰(zhàn)

第 1章　Vue．js基礎(chǔ)入門 001
教學(xué)導(dǎo)航　001
1．1　初識(shí)Vue　001
1．1．1　前端技術(shù)的發(fā)展　001
1．1．2　什么是Vue　002
1．1．3　Vue的優(yōu)勢(shì)　002
1．2　搭建Vue開發(fā)環(huán)境　003
1．2．1　Visual Studio Code編輯器　003
1．2．2　Vue的下載和引入　004
1．2．3　git-bash命令行工具　004
1．2．4　Node．js環(huán)境　005
1．2．5　npm包管理工具　006
1．2．6　Chrome瀏覽器和vue-devtools
擴(kuò)展　007
1．2．7　Hello World案例　008
1．3　webpack打包工具　009
1．3．1　安裝webpack　009
1．3．2　webpack簡(jiǎn)單使用　009
1．3．3　構(gòu)建Vue項(xiàng)目　010
本章小結(jié)　011
課后習(xí)題　011
第　2章Vue開發(fā)基礎(chǔ)（上）　013
教學(xué)導(dǎo)航　013
2．1　Vue實(shí)例　013
2．1．1　創(chuàng)建Vue實(shí)例　013
2．1．2　el唯一根標(biāo)簽　014
2．1．3　data初始數(shù)據(jù)　015
2．1．4　methods定義方法　015
2．1．5　computed計(jì)算屬性　016
2．1．6　watch狀態(tài)監(jiān)聽　017
2．1．7　filters過濾器　018
2．2　Vue數(shù)據(jù)綁定　020
2．2．1　綁定樣式　020
2．2．2　內(nèi)置指令　022
2．2．3　學(xué)生列表案例　027
2．3　Vue事件　028
2．3．1　事件監(jiān)聽　028
2．3．2　事件修飾符　029
2．4　Vue組件　033
2．4．1　什么是組件　033
2．4．2　局部注冊(cè)組件　034
2．4．3　template模板　035
2．4．4　組件之間的數(shù)據(jù)傳遞　036
2．4．5　組件切換　038
2．5　Vue的生命周期　039
2．5．1　鉤子函數(shù)　039
2．5．2　實(shí)例創(chuàng)建　040
2．5．3　頁(yè)面掛載　040
2．5．4　數(shù)據(jù)更新　041
2．5．5　實(shí)例銷毀　042
本章小結(jié)　043
課后習(xí)題　043
第3章Vue開發(fā)基礎(chǔ)（下）　045
教學(xué)導(dǎo)航　045
3．1　全局API　045
3．1．1　Vue．directive　045
3．1．2　Vue．use　046
3．1．3　Vue．extend　047
3．1．4　Vue．set　048
3．1．5　Vue．mixin　049
3．2　實(shí)例屬性　049
3．2．1　vm．$props　050
3．2．2　vm．$options　052
3．2．3　vm．$el　052
3．2．4　vm．$children　053
3．2．5　vm．$root　054
3．2．6　vm．$slots　054
3．2．7　vm．$attrs　056
3．3　全局配置　056
3．3．1　productionTip　056
3．3．2　silent　057
3．3．3　devtools　058
3．4　組件進(jìn)階　058
3．4．1　mixins　059
3．4．2　render　060
3．4．3　createElement　061
本章小結(jié)　062
課后習(xí)題　062
第4章Vue過渡和動(dòng)畫　064
教學(xué)導(dǎo)航　064
4．1過渡和動(dòng)畫基礎(chǔ)　064
4．1．1　什么是過渡和動(dòng)畫　064
4．1．2　transition組件　065
4．1．3　自定義類名　067
4．1．4　使用@keyframes創(chuàng)建CSS
動(dòng)畫　069
4．1．5　鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫　070
4．1．6　Vue結(jié)合Velocity．js實(shí)現(xiàn)動(dòng)畫　071
4．2　多個(gè)元素過渡　072
4．2．1　不同標(biāo)簽名元素的過渡　072
4．2．2　相同標(biāo)簽名元素的過渡　073
4．2．3　過渡模式　075
4．3　多個(gè)組件過渡　076
4．4　列表過渡　077
4．4．1　什么是列表過渡　077
4．4．2　列表的進(jìn)入和離開過渡　077
4．4．3　列表的排序過渡　078
4．4．4　列表的交錯(cuò)過渡　080
4．4．5　可復(fù)用的過渡　082
本章小結(jié)　085
課后習(xí)題　086
第5章Vue路由　087
教學(xué)導(dǎo)航　087
5．1　初識(shí)路由　087
5．2　vue-router　089
5．2．1　vue-router的工作原理　089
5．2．2　vue-router的基本使用　090
5．2．3　路由對(duì)象的屬性　091
5．3　用戶登錄注冊(cè)案例　092
5．3．1　案例分析　092
5．3．2　準(zhǔn)備工作　093
5．3．3　代碼實(shí)現(xiàn)　096
5．4　動(dòng)態(tài)路由　101
5．4．1　什么是動(dòng)態(tài)路由　101
5．4．2　query方式傳參　102
5．4．3　params方式傳參　103
5．5　嵌套路由　104
5．5．1　什么是嵌套路由　104
5．5．2　嵌套路由案例　105
5．6　命名路由　107
5．6．1　什么是命名路由　107
5．6．2　命名路由案例　108
5．7　命名視圖　109
5．7．1　什么是命名視圖　109
5．7．2　命名視圖案例　109
5．8　編程式導(dǎo)航　110
5．8．1　router．push()　110
5．8．2　router．replace()　113
5．8．3　router．go()　113
本章小結(jié)　114
課后習(xí)題　114
第6章Vuex狀態(tài)管理　116
教學(xué)導(dǎo)航　116
6．1　初識(shí)Vuex　116
6．1．1　什么是Vuex　116
6．1．2　Vuex的下載和安裝　117
6．1．3　計(jì)數(shù)器案例　120
6．1．4　Vuex狀態(tài)管理模式　121
6．2　Vuex配置選項(xiàng)　122
6．2．1　actions　122
6．2．2　mutations　125
6．2．3　getters　128
6．2．4　modules　130
6．2．5　plugins　131
6．2．6　devtools　132
6．3　Vuex中的API　133
6．3．1　模塊注冊(cè)　133
6．3．2　狀態(tài)替換　134
6．4　購(gòu)物車案例　135
6．4．1　案例分析　135
6．4．2　代碼實(shí)現(xiàn)　136
本章小結(jié)　142
課后習(xí)題　143
第7章Vue開發(fā)環(huán)境　144
教學(xué)導(dǎo)航　144
7．1　Vue CLI腳手架工具　144
7．1．1　安裝前的注意事項(xiàng)　144
7．1．2　全局安裝@vue/cli　145
7．1．3　使用vue create命令創(chuàng)建項(xiàng)目　145
7．1．4　使用GUI創(chuàng)建項(xiàng)目　147
7．2　插件　149
7．2．1　CLI插件　150
7．2．2　安裝插件　150
7．3　CLI服務(wù)和配置文件　151
7．3．1　CLI服務(wù)　151
7．3．2　配置文件　152
7．3．3　配置多頁(yè)應(yīng)用　154
7．4　環(huán)境變量和模式　157
7．4．1　環(huán)境變量　157
7．4．2　模式　158
7．5　靜態(tài)資源管理　158
本章小結(jié)　160
課后習(xí)題　160
第8章服務(wù)器端渲染　162
教學(xué)導(dǎo)航　162
8．1　初識(shí)服務(wù)器端渲染　162
8．1．1　客戶端渲染與服務(wù)器端渲染的
區(qū)別　162
8．1．2　服務(wù)器端渲染的注意事項(xiàng)　163
8．2　服務(wù)器端渲染的簡(jiǎn)單實(shí)現(xiàn)　164
8．2．1　創(chuàng)建vue-ssr項(xiàng)目　164
8．2．2　渲染Vue實(shí)例　164
8．2．3　Express搭建SSR　165
8．2．4　Koa搭建SSR　166
8．3　webpack搭建服務(wù)器端渲染　167
8．3．1　基本流程　167
8．3．2　項(xiàng)目搭建　168
8．4　Nuxt．js服務(wù)器端渲染框架　172
8．4．1　創(chuàng)建Nuxt．js項(xiàng)目　172
8．4．2　頁(yè)面和路由　173
8．4．3　頁(yè)面跳轉(zhuǎn)　174
本章小結(jié)　174
課后習(xí)題　175
第9章“微商城”項(xiàng)目　176
教學(xué)導(dǎo)航　176
9．1　開發(fā)前準(zhǔn)備　176
9．1．1　項(xiàng)目展示　176
9．1．2　技術(shù)方案　179
9．1．3　項(xiàng)目開發(fā)流程　180
9．2　項(xiàng)目搭建　180
9．2．1　創(chuàng)建項(xiàng)目　180
9．2．2　配置路由　181
9．2．3　配置Vuex　181
9．2．4　配置axios　182
9．2．5　目錄結(jié)構(gòu)　182
9．3　商城首頁(yè)　182
9．3．1　頁(yè)面結(jié)構(gòu)　183
9．3．2　頂部標(biāo)題欄　183
9．3．3　輪播圖　185
9．3．4　九宮格展示區(qū)域　187
9．3．5　底部導(dǎo)航欄　187
9．4　新聞資訊　188
9．4．1　新聞資訊列表　188
9．4．2　新聞詳情　189
9．5　圖片分享　189
9．5．1　圖片列表　190
9．5．2　圖片詳情　190
9．6　商品購(gòu)買　192
9．6．1　商品詳情頁(yè)　192
9．6．2　購(gòu)物車　194
9．7　分類列表　196
9．7．1　頁(yè)面結(jié)構(gòu)搭建　196
9．7．2　better-scroll的運(yùn)用　197
本章小結(jié)　197
課后習(xí)題　197