Vue.js開發(fā)快速入門到精通

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