內容簡介
全書共13章,主要講解Vue.js前端開發框架的相關知識,內容包括初始Vue.js、計算屬性、監聽器屬性、內置指令、自定義指令、組件、過渡與動畫、渲染函式、回響性與組合API、使用webpack、前端路由與vue-router、狀態管理與Vuex、移動電子商務以及人事管理系統。書中實例側重實用性、趣味性強、分部合理、通俗易懂,使讀者能夠快速掌握Vue.js前端開發框架的基礎知識、編程技巧以及完整的開發體系,為前後端分離開發打下堅實的基礎。
圖書目錄
目錄
第1章 初識Vue.js
1.1網站互動方式 /2
1.1.1多頁應用程式 /2
1.1.2單頁應用程式 /2
1.2 MVVM模式 /3
1.3 Vue.js是什麼 /4
1.4 安裝 Vue.js /4
1.5 第一個 Vue.js程式 /5
1.5.1安裝 VSCode及其外掛程式 /5
1.5.2創建第一個 Vue.js套用 /6
1.5.3聲明式渲染 /8
1.5.4 Vue.js的生命周期 /8
1.6 插值與表達式 /10
1.6.1文本插值 /10
1.6.2原始 HTML插值 /11
1.6.3 JavaScript表達式 /11
本章小結 /11習題1 /11
第2章 計算屬性和監聽器
2.1 計算屬性 computed /13
2.1.1什麼是計算屬性 /13
2.1.2隻有 getter方法的計算屬性 /13
2.1.3定義有 getter和 setter方法的計算屬性 /14
2.1.4計算屬性和 methods的對比 /15
2.2 監聽器屬性 watch /17
2.2.1 watch屬性的用法 /17
2.2.2 computed屬性和 watch屬性的對比 /19
本章小結 /19習題2 /19
第3章 內置指令
3.1 v-bind /21
3.1.1 v-bind指令的用法 /21
3.1.2使用 v-bind綁定 class /21
3.1.3使用 v-bind綁定 style /24
3.2條件渲染指令 /25
3.2.1 v-if指令 /25
3.2.2 v-show指令 /25
3.3 列表渲染指令 v-for / 27
3.3.1基本用法 /27
3.3.2數組更新 /29
3.3.3過濾與排序 /30
3.4 事件處理 /32
3.4.1使用 v-on指令監聽事件 /33
3.4.2使用$event訪問原生的 DOM事件 /33
3.4.3事件修飾符 /34
3.5 表單與 v-model /35
3.5.1基本用法 /35
3.5.2修飾符 /37
3.6 實戰:購物車實例 /38
本章小結 /41
習題3 /41
第4章 組件
4.1 組件的註冊 /44
4.1.1全局註冊 /44
4.1.2局部註冊 /45
4.2 使用 props傳遞數據 /47
4.2.1基本用法 /47
4.2.2單向數據流 /48
4.2.3數據驗證 /49
4.3 組件的通信 /51
4.3.1使用自定義事件通信 /51
4.3.2使用 v-model通信 /53
4.3.3使用 mitt實現非父子組件通信 /54
4.3.4提供/注入(組件鏈傳值) /56
4.4 插槽 /57
4.4.1單插槽 slot /58
4.4.2多個具名插槽 /58
4.4.3作用域插槽 /59
4.5 動態組件與異步組件 /60
4.5.1動態組件 /60
4.5.2異步組件 /62
4.6 使用 ref獲取 DOM元素和引用組件 /62
4.7 實戰:正整數數字輸入框組件 /64
本章小結 /65
習題4 /65
第5章 過渡與動畫
5.1 單元素/單組件過渡 /68
5.1.1過渡 class /68
5.1.2 CSS過渡 /69
5.1.3 CSS動畫 /71
5.1.4同時使用過渡和動畫 /72
5.1.5 JavaScript鉤子方法 /73
5.2 多元素/多組件過渡 /76
5.2.1多元素過渡 /76
5.2.2多組件過渡 /77
5.3 列表過渡 /79
5.3.1列表的普通過渡 /79
5.3.2列表的平滑過渡 /80
5.3.3列表的變換過渡 /81
5.3.4多維列表的過渡 /82
本章小結 /83
習題5 /84
第6章 自定義指令
6.1 自定義指令的註冊
6.2 實戰:實時時間轉換指令 /88
本章小結 /90
習題6 /90
第7章 渲染函式
7.1DOM樹 /92
7.2什麼是渲染函式 /92
7.3h()函式 /95
7.3.1基本參數 /95
7.3.2約束 /95
7.3.3使用 JavaScript代替模板功能 /96
本章小結 /100
習題 7 /100
第8章 回響性與組合API
8.1 回響性 /102
8.1.1什麼是回響性 /102
8.1.2回響性的原理 /102
8.2 為什麼使用組合 API /103
8.3 setup選項 /105
8.3.1 setup函式的參數 /105
8.3.2 setup函式的返回值 /107
8.3.3使用 ref創建回響式引用 /108
8.3.4在 setup內部調用生命周期鉤子函式 /109
8.4 提供/注入 /110
8.4.1 provide方法 /111
8.4.2 inject方法 /111
8.5模板引用 /113
8.6 回響式計算與偵聽 /113
8.6.1回響式計算 /113
8.6.2回響式偵聽 /114
本章小結 /116
習題 8 /116
第9章 webpack
9.1 webpack介紹 /118
9.2 webpack的安裝與使用 /118
9.2.1安裝 Node.js和 NPM /118
9.2.2 NPM常用命令 /119
9.2.3安裝 webpack /122
9.2.4安裝 webpack-cli /122
9.2.5安裝 webpack-dev-server /123
9.2.6 webpack的基本配置 /123
9.2.7 webpack打包實例 /125
9.3載入器與外掛程式 /131
9.3.1載入器 /131
9.3.2外掛程式 /137
9.4 單檔案組件與 vue-loader /139
本章小結 /144
習題 9 /144
第10章 Vue Router
10.1 什麼是路由 /146
10.2 Vue Router的安裝 /146
10.3Vue Router的基本用法 /151
10.3.1 跳轉與傳參 /151
10.3.2 配置路由 /152
10.4Vue Router的高級套用 /156
10.4.1 動態路由匹配 /156
10.4.2 嵌套路由 /160
10.4.3 編程式導航 /165
10.4.4 命名路由 /167
10.4.5 重定向 /167
10.4.6 使用 props傳參 /168
10.4.7 HTML5歷史記錄模式 /169
10.5 路由鉤子函式 /169
10.5.1 全局前置鉤子函式 /169
10.5.2 全局解析鉤子函式 /171
10.5.3 全局後置鉤子函式 /171
10.5.4 某個路由的鉤子函式 /171
10.5.5 組件內的鉤子函式 /172
10.6 路由元信息 /173
10.7 登錄許可權驗證實例 /174
本章小結 /177
習題 10 /177
第11章 Vuex
11.1 狀態管理與套用場景 /180
11.1.1 狀態管理 /180
11.1.2 套用場景 /181
11.2Vuex的安裝與基本套用 /181
11.3 Vuex的核心概念 /182
11.3.1 Vuex中的 state /182
11.3.2 Vuex中的 getters /187
11.3.3 Vuex中的 mutations /191
11.3.4 Vuex中的 actions /194
11.3.5 Vuex中的 modules /199
本章小結 /201習題 11 /201
第12章 Vue UI組件庫
12.1setup語法糖 /203
12.1.1 屬性與方法的綁定 /203
12.1.2 路由 /204
12.1.3 組件傳值 /206
12.2 Element Plus /209
12.2.1 Element Plus的安裝 /209
12.2.2 Element Plus組件的介紹 /210
12.2.3 Element Plus組件的套用 /211
12.2.4 按需引入 Element Plus /215
12.3 View UI Plus /217
12.3.1 View UI Plus的安裝 /217
12.3.2 View UI Plus組件的介紹 /218
12.3.3 View UI Plus組件的套用 /219
12.3.4 按需引入 View UI Plus /221
12.4 Vant UI /222
12.4.1 Vant UI的安裝 /222
12.4.2 Vant UI組件的介紹 /224
12.4.3 Vant UI組件的套用 /224
12.4.4 按需引入 Vant UI /225
12.5其他 UI組件庫 /227
本章小結 /228
習題 12 /228
第13章 電子商務平台的前端設計與實現
13.1 系統設計 /230
13.1.1 系統的功能需求 /230
13.1.2 系統的模組劃分 /230
13.2 實現技術 /231
13.2.1 使用 Vite構建後台管理子系統 /231
13.2.2 使用 Vue CLI構建電子商務子系統 /233
13.3系統管理 /233
13.4 後台管理子系統的實現 /238
13.4.1 管理員登錄界面 /238
13.4.2 導航欄界面 /241
13.4.3 類型管理界面 /246
13.4.4 商品管理界面 /251
13.4.5 訂單管理界面 /260
13.4.6 銷量統計界面 /266
13.4.7 訂單統計界面 /268
13.5 電子商務子系統的實現 /270
13.5.1 導航欄及搜尋界面 /270
13.5.2 首頁界面 /273
13.5.3 用戶註冊界面 /276
13.5.4 用戶登錄界面 /278
13.5.5 商品詳情界面 /279
13.5.6 我的購物車界面 /281
13.5.7 我的訂單界面 /283
13.5.8 我的收藏界面 /287
本章小結 /289習題 13 /289
參考文獻