基本介紹
- 中文名：Vue.js前端框架技術與實戰
- 外文名：Vue.js Front End Framework Technology and Practice
- 作者：儲久良
- 出版時間：2022年1月1日
- 出版社：清華大學出版社
- 頁數：469 頁
- ISBN：9787302585893
- 開本：16 開
- 裝幀：平裝
- 叢書名：清華科技大講堂叢書
- 字數：754000
內容簡介,圖書目錄,
內容簡介
Vue.js是一套用於構建用戶界面的漸進式框架，是目前流行的三大前端框架之一。
《Vue.js前端框架技術與實戰（微課視頻版）/清華科技大講堂叢書》以Vue2.6.12為基礎，重點講解Vue生產環境配置與開發工具的使用、基礎語法、指令、組件開發及周邊生態系統；以Vue3.0為提高，重點介紹新版本改進和最佳化之處以及如何利用新版本開發應用程式。
《Vue.js前端框架技術與實戰（微課視頻版）/清華科技大講堂叢書》共分為12章，主要涵蓋Vue.js概述、Vue.js基礎、Vue.js指令、Vue.js基礎項目實戰、Vue.js組件開發、Vue.js過渡與動畫、Vue項目開發環境與輔助工具部署、前端路由VueRouter、狀態管理模式Vuex、VueUI組件庫、Vue高級項目實戰以及Vue3.0基礎套用。每章均附有本章學習目標、本章小結、練習與實訓，便於廣大讀者和工程技術人員學習、實踐與提高。
《Vue.js前端框架技術與實戰（微課視頻版）/清華科技大講堂叢書》可作為高等院校數據科學與大數據技術、計算機科學與技術、軟體工程、物聯網工程、網路工程等理工科相關專業“網頁開發與設計”“Web前端開發技術”“Web套用技術”等課程的教材，也可作為Web前端工程師等IT技術人員學習“新Web前端框架”的自學參考書。
圖書目錄
第1章 Vue.js概述 1
1.1 Vue.js簡介 1
1.2 Vue.js生產環境配置 2
1.2.1 Vue.js引入方法 2
1.2.2 安裝Vue Devtools 3
1.3 Vue頁面基本結構 5
1.3.1 <template>標記 5
1.3.2 <script>標記 6
1.3.3 <style>標記 8
1.4 Vue.js開發工具 8
1.4.1 Visual Studio Code 9
1.4.2 Sublime Text 9
1.4.3 WebStorm 10
1.4.4 HBuilderX 10
本章小結 11
練習1 11
實訓1 12
第2章 Vue.js基礎 15
2.1 MVC與MVVM模式 15
2.1.1 MVC模式 15
2.1.2 MVVM模式 16
2.1.3 MVVM模式的前端框架發展趨勢 17
2.1.4 MVVM模式的套用 17
2.2 數據綁定與插值 20
2.2.1 文本綁定 20
2.2.2 HTML代碼綁定 20
2.2.3 屬性綁定 21
2.2.4 JavaScript表達式綁定 21
2.3 計算屬性與方法 22
2.3.1 計算屬性基礎套用 23
2.3.2 計算屬性快取與方法的比較 24
2.3.3 計算屬性的setter和getter 26
2.4 偵聽屬性 29
2.4.1 偵聽屬性基本用法 29
2.4.2 偵聽屬性高級用法 31
2.5 生命周期鉤子函式 34
2.5.1 生命周期鉤子函式的作用 34
2.5.2 生命周期鉤子函式的套用 37
2.6 控制台對象 39
2.6.1 顯示信息的命令 40
2.6.2 占位符 40
2.6.3 分組顯示 41
2.6.4 查看對象的信息 42
2.6.5 顯示某個節點的內容 42
2.6.6 判斷變數是否為真 42
2.6.7 追蹤函式的調用軌跡 43
2.6.8 計時功能 43
2.6.9 性能分析 44
2.6.10 表格形式輸出數組和對象 45
2.7 數據與方法 48
2.7.1 數據對象的定義與使用 49
2.7.2 Vue實例屬性與方法 50
2.8 Vue中的數組變動更新檢測 53
2.8.1 變異方法 53
2.8.2 非變異方法 54
2.9 Vue中的過濾器 57
本章小結 60
練習2 61
實訓2 62
第3章 Vue.js指令 66
3.1 Vue.js內置指令 67
3.1.1 條件渲染 67
3.1.2 用key管理可復用的元素 69
3.1.3 根據條件展示元素 71
3.1.4 列表渲染 73
3.1.5 綁定屬性 81
3.1.6 事件處理 83
3.1.7 事件修飾符 85
3.1.8 按鍵修飾符 90
3.1.9 表單輸入綁定 92
3.1.10 表單元素值綁定 95
3.1.11 v-model修飾符 97
3.1.12 v-text與v-html指令 98
3.1.13 v-pre、v-once和v-cloak指令 100
3.2 Vue.js自定義指令 101
3.2.1 自定義指令註冊 101
3.2.2 對象字面量 105
3.2.3 動態指令參數 105
3.2.4 自定義指令實際套用 107
本章小結 108
練習3 109
實訓3 110
第4章 Vue.js基礎項目實戰 114
4.1 簡易圖書管理 114
4.1.1 項目需求 114
4.1.2 項目實現 115
4.2 我的待辦事項 119
4.2.1 項目需求 119
4.2.2 項目實現 120
本章小結 125
實訓4 125
第5章 Vue.js組件開發 126
5.1 組件基礎 126
5.1.1 組件命名 127
5.1.2 組件註冊 128
5.2 組件間通信 131
5.2.1 父組件向子組件傳值 131
5.2.2 子組件向父組件傳值 139
5.2.3 兄弟組件之間的通信 143
5.2.4 父鏈與子組件索引 145
5.3 單檔案組件 146
5.4 插槽 149
5.4.1 匿名插槽 149
5.4.2 具名插槽 151
5.4.3 作用域插槽 153
5.4.4 動態插槽名 155
本章小結 157
練習5 158
實訓5 158
第6章 Vue.js過渡與動畫 163
6.1 單元素/單組件的過渡 163
6.1.1 過渡的類名 165
6.1.2 CSS 過渡 166
6.1.3 CSS動畫 167
6.1.4 自定義過渡的類名 168
6.1.5 同時使用過渡和動畫 170
6.1.6 顯性的過渡持續時間 170
6.1.7 JavaScript 鉤子 170
6.2 初始渲染的過渡 171
6.3 多個元素的過渡 172
6.4 多個組件的過渡 177
6.5 列表過渡 178
6.5.1 列表的進入/離開過渡 179
6.5.2 列表的排序過渡 181
6.5.3 列表的交錯過渡 183
本章小結 186
練習6 186
實訓6 187
第7章 Vue項目開發環境與輔助工具部署 192
7.1 部署Node.js 192
7.1.1 Node.js簡介 192
7.1.2 Node.js部署 194
7.1.3 Node.js模組系統 194
7.1.4 Node.js 創建第1個套用 202
7.2 Node包管理器npm 203
7.2.1 npm簡介 203
7.2.2 npm常用命令 204
7.3 Node.js環境配置 206
7.4 webpack打包工具 208
7.4.1 webpack簡介 208
7.4.2 webpack使用與基本配置 209
7.4.3 webpack配置載入器 215
7.4.4 webpack配置外掛程式 222
7.4.5 webpack配置開發伺服器 228
7.5 Vue CLI 235
7.5.1 Vue CLI安裝 236
7.5.2 Vue CLI創建Vue項目 236
7.5.3 Vue CLI可視化創建Vue項目 238
本章小結 240
練習7 240
實訓7 241
第8章 前端路由Vue Router 246
8.1 Vue Router概述 246
8.1.1 Vue Router的安裝與使用 247
8.1.2 Vue Router基礎套用 247
8.2 Vue Router高級套用 252
8.2.1 動態路由匹配 252
8.2.2 嵌套路由 254
8.2.3 編程式導航 260
8.2.4 命名路由 262
8.2.5 命名視圖 263
8.2.6 重定向和別名 264
8.2.7 路由組件傳參 265
8.2.8 HTML5 History模式 267
本章小結 267
練習8 268
實訓8 269
第9章 狀態管理模式Vuex 275
9.1 Vuex概述 275
9.1.1 Vuex定義 276
9.1.2 簡單狀態管理——store模式 277
9.2 Vuex基本套用 280
9.3 Vuex核心概念 281
9.3.1 一個完整的store結構 281
9.3.2 最簡單的store 282
9.3.3 Vuex中的state 283
9.3.4 Vuex中的getters 287
9.3.5 Vuex中的mutations 291
9.3.6 Vuex中的actions 293
9.3.7 Vuex中的modules 301
9.4 Vuex多模組實戰案例 307
本章小結 313
練習9 313
實訓9 314
第10章 Vue UI組件庫 318
10.1 Vue PC端組件庫 318
10.1.1 Element UI 319
10.1.2 iView UI 331
10.1.3 其他PC端UI組件庫 336
10.2 Vue移動端UI組件庫 336
10.2.1 Mint UI 336
10.2.2 Vant 340
10.2.3 其他移動端組件庫 344
本章小結 345
練習10 345
實訓10 346
第11章 Vue高級項目實戰 351
11.1 友聯通訊錄 351
11.1.1 項目需求 351
11.1.2 實現技術 352
11.1.3 環境配置 352
11.1.4 項目實現 353
11.2 通用登錄/註冊管理系統 379
11.2.1 項目需求 379
11.2.2 實現技術 380
11.2.3 環境配置 381
11.2.4 項目實現 383
本章小結 415
練習11 415
實訓11 415
第12章 Vue 3.0基礎套用 416
12.1 Vue 3.0新特性 416
12.1.1 新特性簡介 417
12.1.2 下一階段工作 418
12.1.3 Vue 3.0學習參考 418
12.2 Vue 3.0初步體驗 418
12.2.1 Vue 3.0下載與引用 418
12.2.2 Vue 3.0創建簡易套用 419
12.2.3 Vue 3.0發布文檔的使用 422
12.3 Vue 3.0新特性套用 423
12.3.1 使用腳手架創建項目 423
12.3.2 組件選項 425
12.3.3 ref()、reactive()和toRefs()函式 428
12.3.4 computed、watch和watchEffect 431
12.3.5 ref引用DOM元素和組件實例 434
12.3.6 Vue Router和Vuex 436
12.3.7 Vue 3.0生命周期 441
12.3.8 provide()和inject()函式 442
12.3.9 組合式API 447
12.3.10 模板refs 449
12.4 Vue 3.0購物車實戰 453
12.4.1 項目設計要求 453
12.4.2 項目實現 455
本章小結 464
練習12 464
實訓12 465
參考文獻 470
