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

第 1章　Vue．js基礎入門 001
教學導航　001
1．1　初識Vue　001
1．1．1　前端技術的發(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　構建Vue項目　010
本章小結　011
課后習題　011
第　2章Vue開發(fā)基礎（上）　013
教學導航　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　學生列表案例　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
本章小結　043
課后習題　043
第3章Vue開發(fā)基礎（下）　045
教學導航　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
本章小結　062
課后習題　062
第4章Vue過渡和動畫　064
教學導航　064
4．1過渡和動畫基礎　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結合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　可復用的過渡　082
本章小結　085
課后習題　086
第5章Vue路由　087
教學導航　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　編程式導航　110
5．8．1　router．push()　110
5．8．2　router．replace()　113
5．8．3　router．go()　113
本章小結　114
課后習題　114
第6章Vuex狀態(tài)管理　116
教學導航　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
本章小結　142
課后習題　143
第7章Vue開發(fā)環(huán)境　144
教學導航　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服務和配置文件　151
7．3．1　CLI服務　151
7．3．2　配置文件　152
7．3．3　配置多頁應用　154
7．4　環(huán)境變量和模式　157
7．4．1　環(huán)境變量　157
7．4．2　模式　158
7．5　靜態(tài)資源管理　158
本章小結　160
課后習題　160
第8章服務器端渲染　162
教學導航　162
8．1　初識服務器端渲染　162
8．1．1　客戶端渲染與服務器端渲染的
區(qū)別　162
8．1．2　服務器端渲染的注意事項　163
8．2　服務器端渲染的簡單實現(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搭建服務器端渲染　167
8．3．1　基本流程　167
8．3．2　項目搭建　168
8．4　Nuxt．js服務器端渲染框架　172
8．4．1　創(chuàng)建Nuxt．js項目　172
8．4．2　頁面和路由　173
8．4．3　頁面跳轉　174
本章小結　174
課后習題　175
第9章“微商城”項目　176
教學導航　176
9．1　開發(fā)前準備　176
9．1．1　項目展示　176
9．1．2　技術方案　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　目錄結構　182
9．3　商城首頁　182
9．3．1　頁面結構　183
9．3．2　頂部標題欄　183
9．3．3　輪播圖　185
9．3．4　九宮格展示區(qū)域　187
9．3．5　底部導航欄　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　頁面結構搭建　196
9．7．2　better-scroll的運用　197
本章小結　197
課后習題　197