Vue.js前端開發實戰（慕課版 第2版）AIGC高效編程
王龍 楊倩倩
相關主題
商品描述
本書系統、全面地介紹Vue.js網站前端開發所涉及的各類知識。全書共16章，內容包括Vue.js簡介、基礎特性、條件判斷與列表渲染、計算屬性與監聽屬性、樣式綁定、事件處理、表單控件綁定、自定義指令、組件、過渡、使用Vue Router實現路由管理、使用axios實現Ajax請求、Vue CLI、狀態管理、綜合開發實例——51購商城、課程設計——智匯企業官方網站首頁。書中每章內容都與實例緊密結合，有助於讀者理解知識、應用知識，達到學以致用的目的。
近年來，AIGC技術高速發展，成為各行各業高質量發展和生產效率提升的重要推動力。本書將AIGC技術融入理論學習、實例編寫、復雜系統開發等環節，幫助讀者實現高效編程。
本書可作為應用型本科計算機科學與技術專業和軟件工程專業、高職軟件技術專業及相關專業的教材，也可作為Vue.js愛好者及初、中級Vue.js程序設計開發人員的參考書。
作者簡介
王龍，男，中共黨員，晉中信息學院副教授，全國高等院校計算機基礎教育研究會理事，山西計算機學會理事，山西省信創學會理事。近年發表學術論文10余篇，其中SCI收錄2篇，EI收錄1篇，核心期刊6篇。任職期間建設信創教育培訓認證中心、山西省高等學校實驗室，主持多項山西省高等學校教學改革創新項目、山西省科技創新項目，主持山西省一流課程“軟件項目實踐”，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 開發工具WebStorm簡介 3
1.4 創建第 一個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 應用程序實例及選項 13
2.1.1 數據 13
2.1.2 方法 14
2.1.3 生命周期鉤子函數 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 參數 21
2.3.2 動態參數 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指令遍歷數組 30
3.2.2 在元素中使用v-for 32
3.2.3 數組更新檢測 32
3.2.4 應用v-for指令遍歷對象 35
3.2.5 向對象中添加響應式屬性 37
3.2.6 應用v-for指令遍歷整數 37
3.3 AIGC輔助編程——v-if和v-for指令的應用 38
3.3.1 切換登錄類型 38
3.3.2 創建待辦事項列表 39
小結 40
上機指導 40
習題 42
第4章 計算屬性與監聽屬性 43
4.1 計算屬性 43
4.1.1 什麼是計算屬性 43
4.1.2 getter和setter 45
4.1.3 計算屬性的緩存 47
4.2 監聽屬性 48
4.2.1 什麼是監聽屬性 48
4.2.2 deep選項 49
4.3 AIGC輔助編程——簡單計數器和長度單位換算的實現 50
4.3.1 實現簡單計數器 50
4.3.2 實現長度單位換算 51
小結 52
上機指導 52
習題 54
第5章 樣式綁定 55
5.1 class屬性綁定 55
5.1.1 對象語法 55
5.1.2 數組語法 59
5.2 內聯樣式綁定 61
5.2.1 對象語法 62
5.2.2 數組語法 64
5.3 AIGC輔助編程——為表格和文字使用樣式綁定 65
5.3.1 實現表格隔行換色 65
5.3.2 制作靜態3D效果的文字 66
小結 67
上機指導 67
習題 68
第6章 事件處理 69
6.1 事件監聽 69
6.1.1 使用v-on指令 69
6.1.2 事件處理方法 70
6.1.3 使用內聯JavaScript語句 72
6.2 事件處理中的修飾符 73
6.2.1 事件修飾符 73
6.2.2 按鍵修飾符 75
6.3 AIGC輔助編程——單擊事件的應用 76
6.3.1 統計單擊按鈕的次數 76
6.3.2 實現選擇題 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 鉤子函數 102
8.3 自定義指令的綁定值 105
8.3.1 綁定數值常量 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 數據傳遞 114
9.2.1 什麼是Prop 114
9.2.2 傳遞動態Prop 115
9.2.3 Prop驗證 116
9.3 自定義事件 119
9.3.1 自定義事件的監聽和觸發 119
9.3.2 將原生事件綁定到組件 122
9.4 內容分發 123
9.4.1 基礎用法 123
9.4.2 編譯作用域 124
9.4.3 默認內容 125
9.4.4 命名插槽 125
9.4.5 作用域插槽 128
9.5 動態組件 130
9.5.1 基礎用法 130
9.5.2 keep-alive 132
9.6 AIGC輔助編程——自定義事件與動態組件的應用 133
9.6.1 為元素設置背景顏色 133
9.6.2 切換文本內容 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鉤子函數 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 實現文字顯示和隱藏的過渡效果 153
10.5.2 實現列表項的過渡效果 153
小結 156
上機指導 156
習題 158
第 11章 使用Vue Router實現路由管理 159
11.1 路由基礎 159
11.1.1 引入Vue Router 159
11.1.2 基本用法 159
11.1.3 動態路由匹配 162
11.1.4 命名路由 163
11.2 編程式導航 163
11.3 嵌套路由 166
11.4 命名視圖 170
11.5 高級用法 173
11.5.1 beforeEach()鉤子函數 173
11.5.2 scrollBehavior()方法 176
11.6 AIGC輔助編程——使用兩種方式實現內容切換 177
11.6.1 實現簡單的選項卡切換 177
11.6.2 使用編程式導航實現內容切換 178
小結 180
上機指導 180
習題 183
第 12章 使用axios實現Ajax請求 184
12.1 什麼是axios 184
12.2 引入axios 184
12.3 發送請求 185
12.3.1 發送get請求 185
12.3.2 發送post請求 187
12.4 AIGC輔助編程——獲取響應數據 189
12.4.1 使用axios發送get請求獲取響應數據 189
12.4.2 使用axios發送post請求獲取響應數據 191
小結 192
上機指導 192
習題 194
第 13章 Vue CLI 195
13.1 Vue CLI簡介 195
13.2 Vue CLI的安裝 196
13.3 創建項目 196
13.3.1 使用vue create命令 196
13.3.2 使用圖形界面 199
13.4 項目結構 200
13.5 單文件組件 202
13.6 AIGC輔助編程——單文件組件的應用 204
13.6.1 編寫一個簡單的計數器組件 204
13.6.2 實現選項卡切換圖片效果 206
小結 207
上機指導 207
習題 210
第 14章 狀態管理 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輔助編程——管理選項卡切換圖片效果與計數器狀態 228
14.5.1 管理選項卡切換圖片效果 228
14.5.2 管理計數器狀態 231
小結 233
上機指導 233
習題 237
第 15章 綜合開發實例——51購商城 238
15.1 項目的設計思路 238
15.1.1 項目概述 238
15.1.2 頁面預覽 238
15.1.3 功能結構 240
15.1.4 文件夾組織結構 241
15.2 主頁的設計與實現 241
15.2.1 主頁的設計 241
15.2.2 頂部區和底部區功能的實現 243
15.2.3 商品分類導航功能的實現 246
15.2.4 輪播圖功能的實現 248
15.2.5 商品推薦功能的實現 250
15.3 商品詳情頁面的設計與實現 252
15.3.1 商品詳情頁面的設計 252
15.3.2 圖片放大鏡效果的實現 253
15.3.3 商品概要功能的實現 255
15.3.4 猜你喜歡功能的實現 258
15.3.5 選項卡切換效果的實現 260
15.4 購物車頁面的設計與實現 262
15.4.1 購物車頁面的設計 262
15.4.2 購物車頁面的實現 262
15.5 付款頁面的設計與實現 265
15.5.1 付款頁面的設計 265
15.5.2 付款頁面的實現 266
15.6 登錄和註冊頁面的設計與實現 269
15.6.1 登錄和註冊頁面的設計 269
15.6.2 登錄頁面的實現 270
15.6.3 註冊頁面的實現 272
15.7 AIGC輔助分析優化項目 275
15.7.1 AIGC輔助提供項目開發思路 275
15.7.2 AIGC輔助優化代碼 276
15.7.3 AIGC輔助完善項目 279
小結 280
第 16章 課程設計——智匯企業官方網站首頁 281
16.1 課程設計目的 281
16.2 系統設計 281
16.2.1 業務流程 281
16.2.2 功能結構 282
16.2.3 系統預覽 282
16.3 實現過程 283
16.3.1 導航欄的設計 283
16.3.2 活動圖片的設計 284
16.3.3 新聞列表的設計 286
16.3.4 產品推薦列表的設計 288
16.3.5 浮動窗口的設計 291
小結 292
