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

第 1章　Vue．js基礎(chǔ)入門 001
教學(xué)導(dǎo)航　001
1．1　初識Vue　001
1．1．1　前端技術(shù)的發(fā)展　001
1．1．2　什么是Vue　002
1．1．3　Vue的優(yōu)勢　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
擴展　007
1．2．7　Hello World案例　008
1．3　webpack打包工具　009
1．3．1　安裝webpack　009
1．3．2　webpack簡單使用　009
1．3．3　構(gòu)建Vue項目　010
本章小結(jié)　011
課后習(xí)題　011
第　2章Vue開發(fā)基礎(chǔ)（上）　013
教學(xué)導(dǎo)航　013
2．1　Vue實例　013
2．1．1　創(chuàng)建Vue實例　013
2．1．2　el唯一根標簽　014
2．1．3　data初始數(shù)據(jù)　015
2．1．4　methods定義方法　015
2．1．5　computed計算屬性　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　局部注冊組件　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　實例創(chuàng)建　040
2．5．3　頁面掛載　040
2．5．4　數(shù)據(jù)更新　041
2．5．5　實例銷毀　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　實例屬性　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　組件進階　058
3．4．1　mixins　059
3．4．2　render　060
3．4．3　createElement　061
本章小結(jié)　062
課后習(xí)題　062
第4章Vue過渡和動畫　064
教學(xué)導(dǎo)航　064
4．1過渡和動畫基礎(chǔ)　064
4．1．1　什么是過渡和動畫　064
4．1．2　transition組件　065
4．1．3　自定義類名　067
4．1．4　使用@keyframes創(chuàng)建CSS
動畫　069
4．1．5　鉤子函數(shù)實現(xiàn)動畫　070
4．1．6　Vue結(jié)合Velocity．js實現(xiàn)動畫　071
4．2　多個元素過渡　072
4．2．1　不同標簽名元素的過渡　072
4．2．2　相同標簽名元素的過渡　073
4．2．3　過渡模式　075
4．3　多個組件過渡　076
4．4　列表過渡　077
4．4．1　什么是列表過渡　077
4．4．2　列表的進入和離開過渡　077
4．4．3　列表的排序過渡　078
4．4．4　列表的交錯過渡　080
4．4．5　可復(fù)用的過渡　082
本章小結(jié)　085
課后習(xí)題　086
第5章Vue路由　087
教學(xué)導(dǎo)航　087
5．1　初識路由　087
5．2　vue-router　089
5．2．1　vue-router的工作原理　089
5．2．2　vue-router的基本使用　090
5．2．3　路由對象的屬性　091
5．3　用戶登錄注冊案例　092
5．3．1　案例分析　092
5．3．2　準備工作　093
5．3．3　代碼實現(xiàn)　096
5．4　動態(tài)路由　101
5．4．1　什么是動態(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　初識Vuex　116
6．1．1　什么是Vuex　116
6．1．2　Vuex的下載和安裝　117
6．1．3　計數(shù)器案例　120
6．1．4　Vuex狀態(tài)管理模式　121
6．2　Vuex配置選項　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　模塊注冊　133
6．3．2　狀態(tài)替換　134
6．4　購物車案例　135
6．4．1　案例分析　135
6．4．2　代碼實現(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　安裝前的注意事項　144
7．1．2　全局安裝@vue/cli　145
7．1．3　使用vue create命令創(chuàng)建項目　145
7．1．4　使用GUI創(chuà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ī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　初識服務(wù)器端渲染　162
8．1．1　客戶端渲染與服務(wù)器端渲染的
區(qū)別　162
8．1．2　服務(wù)器端渲染的注意事項　163
8．2　服務(wù)器端渲染的簡單實現(xiàn)　164
8．2．1　創(chuàng)建vue-ssr項目　164
8．2．2　渲染Vue實例　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　項目搭建　168
8．4　Nuxt．js服務(wù)器端渲染框架　172
8．4．1　創(chuàng)建Nuxt．js項目　172
8．4．2　頁面和路由　173
8．4．3　頁面跳轉(zhuǎn)　174
本章小結(jié)　174
課后習(xí)題　175
第9章“微商城”項目　176
教學(xué)導(dǎo)航　176
9．1　開發(fā)前準備　176
9．1．1　項目展示　176
9．1．2　技術(shù)方案　179
9．1．3　項目開發(fā)流程　180
9．2　項目搭建　180
9．2．1　創(chuà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　商城首頁　182
9．3．1　頁面結(jié)構(gòu)　183
9．3．2　頂部標題欄　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　商品購買　192
9．6．1　商品詳情頁　192
9．6．2　購物車　194
9．7　分類列表　196
9．7．1　頁面結(jié)構(gòu)搭建　196
9．7．2　better-scroll的運用　197
本章小結(jié)　197
課后習(xí)題　197