Vue.js開(kāi)發(fā)快速入門(mén)到精通

基礎(chǔ)篇  001
第1章  初識(shí)Vue.js  002
1.1  Vue.js概述  002
1.1.1  什么是Vue.js  002
1.1.2  Vue.js的主要特性  003
1.2  Vue.js的安裝  003
1.2.1  直接下載并引入  003
1.2.2  引用外部CDN文件  004
1.2.3  使用NPM方法  004
1.3  Vue.js的開(kāi)發(fā)模式  005
1.4  WebStorm簡(jiǎn)介  005
1.4.1  WebStorm的下載  006
1.4.2  WebStorm的安裝  006
1.5  創(chuàng)建第一個(gè)Vue實(shí)例  010
第2章  基礎(chǔ)特性  015
2.1  創(chuàng)建Vue實(shí)例  015
2.1.1  使用el選項(xiàng)定義掛載元素  015
2.1.2  使用data選項(xiàng)定義數(shù)據(jù)  016
2.1.3  使用methods選項(xiàng)定義方法  017
2.1.4  生命周期鉤子函數(shù)  018
2.2  實(shí)現(xiàn)數(shù)據(jù)綁定  019
2.2.1  插值  019
2.2.2  定義過(guò)濾器  024
2.2.3  使用指令  028
2.3  綜合案例—動(dòng)態(tài)顯示時(shí)間  029
2.4  實(shí)戰(zhàn)練習(xí)  031
第3章  條件判斷  032
3.1  使用v-if指令  032
3.1.1  基本用法  032
3.1.2  判斷一組元素  033
3.2  使用v-else指令  033
3.3  使用v-else-if指令  035
3.4  管理可復(fù)用的元素  037
3.5  使用v-show指令  038
3.5.1  基本用法  038
3.5.2  v-if指令和v-show指令的比較  039
3.6  綜合案例—輸出獎(jiǎng)項(xiàng)級(jí)別及獎(jiǎng)品  039
3.7  實(shí)戰(zhàn)練習(xí)  041
第4章  列表渲染  043
4.1  遍歷數(shù)組  043
4.1.1  基本用法  043
4.1.2  循環(huán)渲染多個(gè)元素  045
4.1.3  數(shù)組的操作  046
4.2  遍歷對(duì)象  050
4.2.1  基本用法  050
4.2.2  添加響應(yīng)式屬性  052
4.3  遍歷整數(shù)  054
4.4  綜合案例—過(guò)濾圖書(shū)信息  055
4.5  實(shí)戰(zhàn)練習(xí)  056
第5章  計(jì)算屬性和監(jiān)聽(tīng)屬性  058
5.1  計(jì)算屬性的基本用法  058
5.1.1  什么是計(jì)算屬性  058
5.1.2  簡(jiǎn)單應(yīng)用  059
5.2  getter和setter  060
5.2.1  使用getter讀取屬性值  060
5.2.2  使用setter設(shè)置屬性值  061
5.3  計(jì)算屬性的緩存  062
5.4  監(jiān)聽(tīng)屬性的用法  064
5.4.1  什么是監(jiān)聽(tīng)屬性  064
5.4.2  簡(jiǎn)單應(yīng)用  065
5.4.3  deep選項(xiàng)的用法  066
5.5  計(jì)算屬性和監(jiān)聽(tīng)屬性的比較  066
5.6  綜合案例—統(tǒng)計(jì)購(gòu)物車中的商品總價(jià)  067
5.7  實(shí)戰(zhàn)練習(xí)  069
第6章  樣式綁定  070
6.1  綁定class屬性  070
6.1.1  綁定為對(duì)象  070
6.1.2  綁定為數(shù)組  076
6.2  綁定style屬性  078
6.2.1  綁定為對(duì)象  078
6.2.2  綁定為數(shù)組  081
6.3  綜合案例—豎向?qū)Ш讲藛? 082
6.4  實(shí)戰(zhàn)練習(xí)  084
第7章 事件處理  085
7.1  監(jiān)聽(tīng)DOM事件  085
7.1.1  v-on指令  085
7.1.2  綁定事件處理方法  086
7.1.3  使用內(nèi)聯(lián)語(yǔ)句  089
7.2  事件中的修飾符  091
7.2.1  事件修飾符  091
7.2.2  按鍵修飾符  093
7.3  綜合案例—二級(jí)聯(lián)動(dòng)菜單  095
7.4  實(shí)戰(zhàn)練習(xí)  098
第8章  表單控件綁定  099
8.1  文本框的綁定  099
8.1.1  綁定單行文本框  099
8.1.2  綁定文本域  101
8.2  單選按鈕的綁定  103
8.3  復(fù)選框的綁定  105
8.3.1  綁定單個(gè)復(fù)選框  105
8.3.2  綁定多個(gè)復(fù)選框  107
8.4  下拉菜單的綁定  108
8.4.1  綁定單選下拉菜單  108
8.4.2  綁定可多選的下拉菜單  111
8.5  將值綁定到動(dòng)態(tài)屬性  113
8.5.1  單選按鈕的值綁定  113
8.5.2  復(fù)選框的值綁定  113
8.5.3  下拉菜單的值綁定  115
8.6  v-model指令的修飾符  115
8.6.1  lazy修飾符  115
8.6.2  number修飾符  116
8.6.3  trim修飾符  116
8.7  綜合案例—省市區(qū)三級(jí)聯(lián)動(dòng)菜單  117
8.8  實(shí)戰(zhàn)練習(xí)  119
第9章  自定義指令  121
9.1  注冊(cè)自定義指令  121
9.1.1  注冊(cè)全局自定義指令  121
9.1.2  注冊(cè)局部自定義指令  122
9.2  鉤子函數(shù)  123
9.3  綁定值的類型  126
9.3.1  綁定數(shù)值  126
9.3.2  綁定字符串  127
9.3.3  綁定對(duì)象字面量  127
9.4  綜合案例—實(shí)現(xiàn)元素的隨意拖動(dòng)  128
9.5  實(shí)戰(zhàn)練習(xí)  130
第10章  組件  131
10.1  組件的注冊(cè)  131
10.1.1  全局注冊(cè)  131
10.1.2  局部注冊(cè)  134
10.2  向子組件傳遞數(shù)據(jù)  135
10.2.1  傳遞靜態(tài)數(shù)據(jù)  135
10.2.2  Prop的書(shū)寫(xiě)規(guī)則  136
10.2.3  傳遞動(dòng)態(tài)數(shù)據(jù)  137
10.2.4  Prop驗(yàn)證  141
10.3  組件的事件處理  143
10.3.1  自定義事件  143
10.3.2  監(jiān)聽(tīng)原生事件  147
10.4  使用插槽實(shí)現(xiàn)內(nèi)容分發(fā)  147
10.4.1  插槽的基礎(chǔ)用法  148
10.4.2  編譯作用域  148
10.4.3  設(shè)置后備內(nèi)容  149
10.4.4  具名插槽的用法  150
10.4.5  插槽Prop  153
10.5  混入對(duì)象  156
10.5.1  混入的基礎(chǔ)用法  156
10.5.2  選項(xiàng)的合并  157
10.5.3  全局混入對(duì)象  160
10.6  動(dòng)態(tài)組件的使用  161
10.6.1  動(dòng)態(tài)組件的基礎(chǔ)用法  161
10.6.2  組件的緩存  163
10.7  綜合案例—實(shí)現(xiàn)經(jīng)典散文和經(jīng)典小說(shuō)之間的切換  166
10.8  實(shí)戰(zhàn)練習(xí)  169
第11章  過(guò)渡效果  171
11.1  單元素的過(guò)渡效果  171
11.1.1  CSS過(guò)渡效果  171
11.1.2  過(guò)渡的類名  172
11.1.3  CSS動(dòng)畫(huà)效果  174
11.1.4  自定義過(guò)渡類名  176
11.1.5  使用鉤子函數(shù)設(shè)置過(guò)渡  177
11.2  多元素的過(guò)渡效果  180
11.2.1  多元素過(guò)渡的基本用法  180
11.2.2  設(shè)置元素的key屬性  181
11.2.3  設(shè)置過(guò)渡模式  184
11.3  多組件的過(guò)渡效果  185
11.4  列表的過(guò)渡效果  188
11.5  綜合案例—廣告圖片的輪播效果  190
11.6  實(shí)戰(zhàn)練習(xí)  193
第12章  使用插件實(shí)現(xiàn)路由和Ajax  194
12.1  設(shè)置路由  194
12.1.1  引入vue-router  194
12.1.2  路由的基本用法  196
12.1.3  動(dòng)態(tài)匹配路由  197
12.1.4  設(shè)置路由名稱  198
12.1.5  應(yīng)用push()方法實(shí)現(xiàn)跳轉(zhuǎn)  198
12.1.6  嵌套路由  201
12.1.7  設(shè)置視圖名稱  208
12.1.8  路由重定向  211
12.1.9  路由的高級(jí)用法  211
12.2  實(shí)現(xiàn)Ajax請(qǐng)求  216
12.2.1  引入axios  216
12.2.2  發(fā)送GET請(qǐng)求  217
12.2.3  發(fā)送POST請(qǐng)求  220
12.3  綜合案例—應(yīng)用嵌套路由實(shí)現(xiàn)組件的切換  223
12.4  實(shí)戰(zhàn)練習(xí)  225
第13章  單頁(yè)Web應(yīng)用  227
13.1  webpack簡(jiǎn)介  227
13.1.1  webpack的安裝  227
13.1.2  webpack的基本用法  228
13.2  loader簡(jiǎn)介  230
13.2.1  CSS加載器  230
13.2.2  配置文件  231
13.2.3  圖片加載器  233
13.3  單文件組件  235
13.3.1  什么是單文件組件  235
13.3.2  簡(jiǎn)單應(yīng)用  235
13.4  使用@vue/cli構(gòu)建項(xiàng)目  238
13.4.1  @vue/cli的安裝  238
13.4.2  快速構(gòu)建項(xiàng)目  239
13.5  綜合案例—實(shí)現(xiàn)購(gòu)物車功能  243
13.6  實(shí)戰(zhàn)練習(xí)  247
第14章  狀態(tài)管理  248
14.1  什么是Vuex  248
14.2  Vuex的使用  249
14.2.1  Vuex的組成  249
14.2.2  在@vue/cli中使用Vuex  249
14.3  綜合案例—保存用戶登錄狀態(tài)  260
14.4  實(shí)戰(zhàn)練習(xí)  266
案例篇  269
第15章  模擬QQ聊天窗口——Vue.js JavaScript實(shí)現(xiàn)  270
15.1  案例分析  270
15.2  實(shí)現(xiàn)過(guò)程  271
15.2.1  左側(cè)用戶列表的設(shè)計(jì)  272
15.2.2  聊天內(nèi)容顯示區(qū)域設(shè)計(jì)  274
15.2.3  文字編輯區(qū)域設(shè)計(jì)  274
第16章  貪吃蛇小游戲——Vue.js JavaScript實(shí)現(xiàn)  278
16.1  案例分析  278
16.2  實(shí)現(xiàn)過(guò)程  279
16.2.1  游戲初始界面設(shè)計(jì)  279
16.2.2  游戲操作  282
第17章  注冊(cè)與登錄——@vue/cli Router Vuex實(shí)現(xiàn)  285
17.1  案例分析  285
17.2  實(shí)現(xiàn)過(guò)程  286
17.2.1  注冊(cè)頁(yè)面設(shè)計(jì)  287
17.2.2  用戶注冊(cè)驗(yàn)證  288
17.2.3  保存注冊(cè)信息  290
17.2.4  登錄頁(yè)面設(shè)計(jì)  290
17.2.5  驗(yàn)證滑塊設(shè)計(jì)  291
17.2.6  用戶登錄驗(yàn)證  292
17.2.7  在根組件中實(shí)現(xiàn)路由  293
第18章  時(shí)光音樂(lè)網(wǎng)首頁(yè)設(shè)計(jì)——@vue/cli axios實(shí)現(xiàn)  296
18.1  案例分析  296
18.2  實(shí)現(xiàn)過(guò)程  297
18.2.1  導(dǎo)航欄的設(shè)計(jì)  297
18.2.2  歌曲列表展示界面  298
18.2.3  輪播圖的設(shè)計(jì)  300
18.2.4  歌曲排行榜  302
18.2.5  最新音樂(lè)資訊  303
18.2.6  頁(yè)面底部的設(shè)計(jì)  304
18.2.7  在根組件中構(gòu)建音樂(lè)網(wǎng)首頁(yè)  305
第19章  游戲公園——@vue/cli Router Vuex實(shí)現(xiàn)  307
19.1  案例分析  307
19.2  實(shí)現(xiàn)過(guò)程  309
19.2.1 主頁(yè)設(shè)計(jì)  309
19.2.2 博客列表頁(yè)面設(shè)計(jì)  314
19.2.3 博客詳情頁(yè)面設(shè)計(jì)  315
19.2.4 關(guān)于我們頁(yè)面設(shè)計(jì)  318
項(xiàng)目篇  321
第20章  51購(gòu)商城——Vue.js @vue/cli Vuex實(shí)現(xiàn)  322
20.1  項(xiàng)目的設(shè)計(jì)思路  322
20.1.1  項(xiàng)目概述  322
20.1.2  界面預(yù)覽  322
20.1.3  功能結(jié)構(gòu)  324
20.1.4  業(yè)務(wù)流程  324
20.1.5  文件夾組織結(jié)構(gòu)  325
20.2  主頁(yè)的設(shè)計(jì)與實(shí)現(xiàn)  325
20.2.1  主頁(yè)的設(shè)計(jì)  325
20.2.2  頂部區(qū)和底部區(qū)功能的實(shí)現(xiàn)  327
20.2.3  商品分類導(dǎo)航功能的實(shí)現(xiàn)  330
20.2.4  輪播圖功能的實(shí)現(xiàn)  331
20.2.5  商品推薦功能的實(shí)現(xiàn)  335
20.3  商品詳情頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)  337
20.3.1  商品詳情頁(yè)面的設(shè)計(jì)  337
20.3.2  圖片放大鏡效果的實(shí)現(xiàn)  338
20.3.3  商品概要功能的實(shí)現(xiàn)  340
20.3.4  猜你喜歡功能的實(shí)現(xiàn)  343
20.3.5  選項(xiàng)卡切換效果的實(shí)現(xiàn)  345
20.4  購(gòu)物車頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)  346
20.4.1  購(gòu)物車頁(yè)面的設(shè)計(jì)  346
20.4.2  購(gòu)物車頁(yè)面的實(shí)現(xiàn)  347
20.5  付款頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)  350
20.5.1  付款頁(yè)面的設(shè)計(jì)  350
20.5.2  付款頁(yè)面的實(shí)現(xiàn)  350
20.6  登錄注冊(cè)頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)  354
20.6.1  登錄注冊(cè)頁(yè)面的設(shè)計(jì)  354
20.6.2  登錄頁(yè)面的實(shí)現(xiàn)  354
20.6.3  注冊(cè)頁(yè)面的實(shí)現(xiàn)  357