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
