本書系統(tǒng)、全面地介紹Vue.js網(wǎng)站前端開發(fā)所涉及的各類知識。全書共16章,內(nèi)容包括Vue.js簡介、基礎特性、條件判斷與列表渲染、計算屬性與監(jiān)聽屬性、樣式綁定、事件處理、表單控件綁定、自定義指令、組件、過渡、使用Vue Router實現(xiàn)路由管理、使用axios實現(xiàn)Ajax請求、Vue CLI、狀態(tài)管理、綜合開發(fā)實例51購商城、課程設計智匯企業(yè)官方網(wǎng)站首頁。書中每章內(nèi)容都與實例緊密結合,有助于讀者理解知識、應用知識,達到學以致用的目的。
近年來,AIGC技術高速發(fā)展,成為各行各業(yè)高質(zhì)量發(fā)展和生產(chǎn)效率提升的重要推動力。本書將AIGC技術融入理論學習、實例編寫、復雜系統(tǒng)開發(fā)等環(huán)節(jié),幫助讀者實現(xiàn)高效編程。
本書可作為應用型本科計算機科學與技術專業(yè)和軟件工程專業(yè)、高職軟件技術專業(yè)及相關專業(yè)的教材,也可作為Vue.js愛好者及初、中級Vue.js程序設計開發(fā)人員的參考書。
(1)明日科技資深講師面對面授課。
(2)結合AIGC實現(xiàn)高效編程,理論與實踐結合,內(nèi)容全面,配套資源豐富且制作精良。
(3)案例式寫法,適合應用型本科院校和職業(yè)院校。
王龍,男,中共黨員,晉中信息學院副教授,全國高等院校計算機基礎教育研究會理事,山西計算機學會理事,山西省信創(chuàng)學會理事。近年發(fā)表學術論文10余篇,其中SCI收錄2篇,EI收錄1篇,核心期刊6篇。任職期間建設信創(chuàng)教育培訓認證中心、山西省高等學校實驗室,主持多項山西省高等學校教學改革創(chuàng)新項目、山西省科技創(chuàng)新項目,主持山西省一流課程軟件項目實踐,2023年榮獲山西省教學成果獎一等獎。
第 1章 Vue.js簡介 1
1.1 Vue.js概述 1
1.1.1 什么是Vue.js 1
1.1.2 Vue.js的特性 2
1.2 Vue.js的安裝 2
1.2.1 使用CDN 2
1.2.2 使用NPM 2
1.2.3 使用Vue CLI 3
1.3 開發(fā)工具WebStorm簡介 3
1.4 創(chuàng)建第 一個Vue實例 6
1.5 在WebStorm中引入AIGC工具 10
1.5.1 AIGC編程助手Baidu Comate 10
1.5.2 AIGC編程助手TONGYI Lingma 10
1.5.3 DeepSeek R1推理大模型 11
小結 11
上機指導 11
習題 12
第 2章 基礎特性 13
2.1 應用程序?qū)嵗斑x項 13
2.1.1 數(shù)據(jù) 13
2.1.2 方法 14
2.1.3 生命周期鉤子函數(shù) 15
2.2 插值 16
2.2.1 文本插值 16
2.2.2 插入HTML 18
2.2.3 綁定屬性 18
2.2.4 使用表達式 20
2.3 指令 21
2.3.1 參數(shù) 21
2.3.2 動態(tài)參數(shù) 22
2.3.3 修飾符 22
2.4 AIGC輔助快速學習 22
2.4.1 AIGC輔助添加注釋 22
2.4.2 AIGC輔助解釋代碼 22
2.4.3 AIGC輔助查詢術語 23
小結 24
上機指導 24
習題 25
第3章 條件判斷與列表渲染 26
3.1 條件判斷 26
3.1.1 v-if指令 26
3.1.2 v-else指令 27
3.1.3 v-else-if指令 27
3.1.4 v-show指令 28
3.1.5 v-if和v-show的比較 29
3.2 列表渲染 30
3.2.1 應用v-for指令遍歷數(shù)組 30
3.2.2 在元素中使用v-for 32
3.2.3 數(shù)組更新檢測 32
3.2.4 應用v-for指令遍歷對象 35
3.2.5 向?qū)ο笾刑砑禹憫綄傩浴?7
3.2.6 應用v-for指令遍歷整數(shù) 37
3.3 AIGC輔助編程v-if和v-for指令的應用 38
3.3.1 切換登錄類型 38
3.3.2 創(chuàng)建待辦事項列表 39
小結 40
上機指導 40
習題 42
第4章 計算屬性與監(jiān)聽屬性 43
4.1 計算屬性 43
4.1.1 什么是計算屬性 43
4.1.2 getter和setter 45
4.1.3 計算屬性的緩存 47
4.2 監(jiān)聽屬性 48
4.2.1 什么是監(jiān)聽屬性 48
4.2.2 deep選項 49
4.3 AIGC輔助編程簡單計數(shù)器和長度單位換算的實現(xiàn) 50
4.3.1 實現(xiàn)簡單計數(shù)器 50
4.3.2 實現(xiàn)長度單位換算 51
小結 52
上機指導 52
習題 54
第5章 樣式綁定 55
5.1 class屬性綁定 55
5.1.1 對象語法 55
5.1.2 數(shù)組語法 59
5.2 內(nèi)聯(lián)樣式綁定 61
5.2.1 對象語法 62
5.2.2 數(shù)組語法 64
5.3 AIGC輔助編程為表格和文字使用樣式綁定 65
5.3.1 實現(xiàn)表格隔行換色 65
5.3.2 制作靜態(tài)3D效果的文字 66
小結 67
上機指導 67
習題 68
第6章 事件處理 69
6.1 事件監(jiān)聽 69
6.1.1 使用v-on指令 69
6.1.2 事件處理方法 70
6.1.3 使用內(nèi)聯(lián)JavaScript語句 72
6.2 事件處理中的修飾符 73
6.2.1 事件修飾符 73
6.2.2 按鍵修飾符 75
6.3 AIGC輔助編程單擊事件的應用 76
6.3.1 統(tǒng)計單擊按鈕的次數(shù) 76
6.3.2 實現(xiàn)選擇題 77
小結 78
上機指導 78
習題 80
第7章 表單控件綁定 81
7.1 綁定文本框 81
7.1.1 單行文本框 81
7.1.2 多行文本框 83
7.2 綁定復選框 84
7.2.1 單個復選框 84
7.2.2 多個復選框 84
7.3 綁定單選按鈕 86
7.4 綁定下拉菜單 87
7.4.1 單選 87
7.4.2 多選 88
7.5 值綁定 90
7.5.1 單選按鈕 90
7.5.2 復選框 90
7.5.3 下拉菜單 92
7.6 使用修飾符 92
7.6.1 .lazy 93
7.6.2 .number 93
7.6.3 .trim 94
7.7 AIGC輔助編程綁定輸入框的值和下拉菜單 94
7.7.1 綁定輸入框的值 94
7.7.2 綁定下拉菜單 95
小結 96
上機指導 96
習題 99
第8章 自定義指令 100
8.1 注冊自定義指令 100
8.1.1 注冊全局自定義指令 100
8.1.2 注冊局部自定義指令 101
8.2 鉤子函數(shù) 102
8.3 自定義指令的綁定值 105
8.3.1 綁定數(shù)值常量 105
8.3.2 綁定字符串常量 106
8.3.3 綁定對象字面量 106
8.4 AIGC輔助編程設置圖片的不透明度和元素的邊框 107
8.4.1 設置圖片的不透明度 107
8.4.2 設置元素的邊框 108
小結 109
上機指導 109
習題 110
第9章 組件 111
9.1 注冊組件 111
9.1.1 注冊全局組件 111
9.1.2 注冊局部組件 113
9.2 數(shù)據(jù)傳遞 114
9.2.1 什么是Prop 114
9.2.2 傳遞動態(tài)Prop 115
9.2.3 Prop驗證 116
9.3 自定義事件 119
9.3.1 自定義事件的監(jiān)聽和觸發(fā) 119
9.3.2 將原生事件綁定到組件 122
9.4 內(nèi)容分發(fā) 123
9.4.1 基礎用法 123
9.4.2 編譯作用域 124
9.4.3 默認內(nèi)容 125
9.4.4 命名插槽 125
9.4.5 作用域插槽 128
9.5 動態(tài)組件 130
9.5.1 基礎用法 130
9.5.2 keep-alive 132
9.6 AIGC輔助編程自定義事件與動態(tài)組件的應用 133
9.6.1 為元素設置背景顏色 133
9.6.2 切換文本內(nèi)容 134
小結 135
上機指導 136
習題 137
第 10章 過渡 138
10.1 單元素過渡 138
10.1.1 CSS過渡 138
10.1.2 過渡的類介紹 139
10.1.3 自定義過渡類 141
10.1.4 CSS動畫 142
10.1.5 JavaScript鉤子函數(shù) 143
10.2 多元素過渡 146
10.2.1 基礎用法 146
10.2.2 key屬性 147
10.2.3 過渡模式 148
10.3 多組件過渡 149
10.4 列表過渡 151
10.5 AIGC輔助編程文字與列表項的過渡效果 152
10.5.1 實現(xiàn)文字顯示和隱藏的過渡效果 153
10.5.2 實現(xiàn)列表項的過渡效果 153
小結 156
上機指導 156
習題 158
第 11章 使用Vue Router實現(xiàn)路由管理 159
11.1 路由基礎 159
11.1.1 引入Vue Router 159
11.1.2 基本用法 159
11.1.3 動態(tài)路由匹配 162
11.1.4 命名路由 163
11.2 編程式導航 163
11.3 嵌套路由 166
11.4 命名視圖 170
11.5 高級用法 173
11.5.1 beforeEach()鉤子函數(shù) 173
11.5.2 scrollBehavior()方法 176
11.6 AIGC輔助編程使用兩種方式實現(xiàn)內(nèi)容切換 177
11.6.1 實現(xiàn)簡單的選項卡切換 177
11.6.2 使用編程式導航實現(xiàn)內(nèi)容切換 178
小結 180
上機指導 180
習題 183
第 12章 使用axios實現(xiàn)Ajax請求 184
12.1 什么是axios 184
12.2 引入axios 184
12.3 發(fā)送請求 185
12.3.1 發(fā)送get請求 185
12.3.2 發(fā)送post請求 187
12.4 AIGC輔助編程獲取響應數(shù)據(jù) 189
12.4.1 使用axios發(fā)送get請求獲取響應數(shù)據(jù) 189
12.4.2 使用axios發(fā)送post請求獲取響應數(shù)據(jù) 191
小結 192
上機指導 192
習題 194
第 13章 Vue CLI 195
13.1 Vue CLI簡介 195
13.2 Vue CLI的安裝 196
13.3 創(chuàng)建項目 196
13.3.1 使用vue create命令 196
13.3.2 使用圖形界面 199
13.4 項目結構 200
13.5 單文件組件 202
13.6 AIGC輔助編程單文件組件的應用 204
13.6.1 編寫一個簡單的計數(shù)器組件 204
13.6.2 實現(xiàn)選項卡切換圖片效果 206
小結 207
上機指導 207
習題 210
第 14章 狀態(tài)管理 211
14.1 Vuex簡介 211
14.2 Vuex的安裝 212
14.3 基礎用法 212
14.3.1 Vuex的組成 212
14.3.2 在項目中使用Vuex 212
14.4 實例 222
14.5 AIGC輔助編程管理選項卡切換圖片效果與計數(shù)器狀態(tài) 228
14.5.1 管理選項卡切換圖片效果 228
14.5.2 管理計數(shù)器狀態(tài) 231
小結 233
上機指導 233
習題 237
第 15章 綜合開發(fā)實例51購商城 238
15.1 項目的設計思路 238
15.1.1 項目概述 238
15.1.2 頁面預覽 238
15.1.3 功能結構 240
15.1.4 文件夾組織結構 241
15.2 主頁的設計與實現(xiàn) 241
15.2.1 主頁的設計 241
15.2.2 頂部區(qū)和底部區(qū)功能的實現(xiàn) 243
15.2.3 商品分類導航功能的實現(xiàn) 246
15.2.4 輪播圖功能的實現(xiàn) 248
15.2.5 商品推薦功能的實現(xiàn) 250
15.3 商品詳情頁面的設計與實現(xiàn) 252
15.3.1 商品詳情頁面的設計 252
15.3.2 圖片放大鏡效果的實現(xiàn) 253
15.3.3 商品概要功能的實現(xiàn) 255
15.3.4 猜你喜歡功能的實現(xiàn) 258
15.3.5 選項卡切換效果的實現(xiàn) 260
15.4 購物車頁面的設計與實現(xiàn) 262
15.4.1 購物車頁面的設計 262
15.4.2 購物車頁面的實現(xiàn) 262
15.5 付款頁面的設計與實現(xiàn) 265
15.5.1 付款頁面的設計 265
15.5.2 付款頁面的實現(xiàn) 266
15.6 登錄和注冊頁面的設計與實現(xiàn) 269
15.6.1 登錄和注冊頁面的設計 269
15.6.2 登錄頁面的實現(xiàn) 270
15.6.3 注冊頁面的實現(xiàn) 272
15.7 AIGC輔助分析優(yōu)化項目 275
15.7.1 AIGC輔助提供項目開發(fā)思路 275
15.7.2 AIGC輔助優(yōu)化代碼 276
15.7.3 AIGC輔助完善項目 279
小結 280
第 16章 課程設計智匯企業(yè)官方網(wǎng)站首頁 281
16.1 課程設計目的 281
16.2 系統(tǒng)設計 281
16.2.1 業(yè)務流程 281
16.2.2 功能結構 282
16.2.3 系統(tǒng)預覽 282
16.3 實現(xiàn)過程 283
16.3.1 導航欄的設計 283
16.3.2 活動圖片的設計 284
16.3.3 新聞列表的設計 286
16.3.4 產(chǎn)品推薦列表的設計 288
16.3.5 浮動窗口的設計 291
小結 292