Vue.js 核心技術解析與 uni-app 跨平臺實戰開發

袁龍：主要從事Web開發、教學培訓等業務，創建“錦匠特效”和“錦匠課堂”兩大Web前端工具類網站，為數万前端開發者提供高效率的工作方式，輕鬆實現網頁動畫特效，目前是51CTO、CSDN等在線教育平台講師。袁老師在51CTO課程平台的學員人數為31萬+，其中“Vue.js快速入門與應用”課程的學習人數高達5.7萬+

第 1 章 Vue.js 基礎入門1
1.1 什麼是 Vue.js 1
1.1.1 當前流行的前端框架1
1.1.2 為什麼要學習 Vue.js2
1.1.3 Vue.js 核心理念2
1.1.4 框架和庫的區別2
1.2 MVVM 前端視圖層開發理念2
1.3 創建 Vue 實例對象，詳解 MVVM3
1.4 詳解插值表達式5
1.5 Vue 基礎指令7
1.5.1 v-cloak 指令7
1.5.2 v-text 指令9
1.5.3 v-html 指令9
1.5.4 v-bind 指令11
1.5.5 v-on 指令13
1.6 事件修飾符15
1.6.1 鼠標按鍵修飾15
1.6.2 系統修飾符15
1.6.3 事件修飾符16
1.7 雙向數據綁定17
1.7.1 v-model 修飾符18
1.7.2 使用 v-model 實現計算器案例19
1.8 v-for 指令21
1.8.1 遍歷普通數組22
1.8.2 遍歷對像數組23
1.8.3 遍歷對象24
1.8.4 遍歷數字25
1.9 學生管理案例25
1.9.1 渲染學生列表26
1.9.2 新增學生28
1.9.3 刪除學生28
1.9.4 搜索學生29

第 2 章 Vue.js 綁定樣式及案例32
2.1 class 類名綁定32
2.1.1 對象控制綁定樣式32
2.1.2 數組控制綁定樣式33
2.2 style 行內樣式綁定34
2.2.1 對象控制綁定行內樣式34
2.2.2 數組控制綁定行內樣式35
2.3 Vue 綁定樣式案例（標題排他）35
2.4 控制元素顯示隱藏37
2.4.1 v-if 和 v-show 指令37
2.4.2 v-if 實現選項卡案例39
2.5 簡單版購物車實例40
2.5.1 購物車實例簡介40
2.5.2 靜態頁面佈局41
2.5.3 渲染購物車列表42
2.5.4 修改商品選中狀態43
2.5.5 記錄選中商品的總數量和總價格44
2.5.6 全選狀態46
2.5.7 商品數量增加或減少48

第 3 章 Vue.js 生命週期函數50
3.1 創建期間生命週期函數50
3.2 運行期間生命週期函數55
3.3 銷毀期間生命週期函數57
3.4 擴展58

第 4 章 Vue.js 動畫59
4.1 Vue 單組動畫59
4.2 Vue 定義多組動畫61
4.3 使用 animate 動畫庫63
4.4 transition-group 列表動畫64

第 5 章 Vue.js 組件67
5.1 創建全局組件67
5.1.1 組件創建方式一67
5.1.2 組件創建方式二68
5.1.3 組件創建方式三68
5.2 創建私有組件69
5.2.1 組件中的 data 和 methods71
5.2.2 組件選項卡切換案例72
5.3 動畫組件74
5.4 組件傳值75
5.4.1 父組件向子組件傳值75
5.4.2 父組件向子組件傳遞方法77
5.4.3 子組件向父組件傳值79
5.5 Vue 獲取 DOM 元素的方法（ref）82
5.5.1 ref 獲取普通 DOM 元素82
5.5.2 ref 獲取組件元素84

第 6 章 Vue.js 路由86
6.1 什麼是路由86
6.1.1 安裝路由86
6.1.2 使用路由87
6.2 路由控制組件切換88
6.3 路由重定向以及動畫路由90
6.4 路由傳參91
6.4.1 傳參方式一91
6.4.2 傳參方式二92
6.5 嵌套路由93
6.6 路由佈局95

第 7 章 Vue.js 高級進階97
7.1 安裝 vue-cli97
7.1.1 vue-cli 創建項目98
7.1.2 運行腳手架項目99
7.2 vue-cli 目錄結構100
7.3 vue-cli 運行機制101
7.4 vue-cli 選項卡案例103
7.5 過濾器105
7.5.1 私有過濾器105
7.5.2 全局過濾器107
7.6 Vue 計算屬性109
7.7 watch 偵聽屬性111
7.8 slot 插槽113
7.9 鍊式路由跳轉115
7.10 路由守衛117
7.10.1 全局路由守衛117
7.10.2 組件內路由守衛119
7.10.3 離開組件時守衛120

第 8 章 element-ui/mint-ui 組件庫122
8.1 element-ui 使用步驟122
8.2 mint-ui 的使用124

第 9 章 axios 發送 HTTP 請求127
9.1 安裝 axios 127
9.1.1 組件中使用 axios128
9.1.2 配置全局域名129
9.1.3 代碼分離129
9.2 axios 傳遞參數130
9.3 axios 原理之 promise 131
9.3.1 什麼是 promise132
9.3.2 為什麼要用 promise132
9.3.3 promise 基本使用132
9.3.4 promise 的 API 133
9.3.5 async 與 await137

第 10 章 Vuex 狀態管理142
10.1 Vuex 基礎應用142
10.2 getters 的使用144
10.3 mutations 的使用145
10.4 actions 的使用148
10.5 Vuex 代碼分離151
10.6 輔助函數152
10.6.1 mapState 輔助函數152
10.6.2 mapGetters 輔助函數153
10.6.3 mapMutations 輔助函數154
10.6.4 mapActions 輔助函數155
10.7 Vuex 實例之登錄退出156
10.7.1 vue-cli 創建項目站點156
10.7.2 Vuex 修改登錄狀態158

第 11 章 企業項目實戰166
11.1 vue-cli 創建項目166
11.2 首頁開發168
11.2.1 佈局首頁靜態頁面170
11.2.2 使用 axios 獲取輪播圖176
11.2.3 首頁廣告版塊數據渲染178
11.2.4 首頁商家推薦版塊數據渲染180
11.2.5 首頁其他版塊數據渲染181
11.3 網頁底部信息和產品列表頁面開發182
11.3.1 產品列表靜態頁面佈局184
11.3.2 渲染全部產品頁面數據186
11.3.3 產品價格排序功能189
11.3.4 產品價格範圍篩選功能190
11.4 element-ui 實現產品分頁192
11.5 產品詳情頁面開發194

第 12 章 Vue3.X 新特性解析198
12.1 Vue3.0 新特性199
12.2 什麼是 Composition API 201
12.2.1 setup 函數的特點202
12.2.2 定義響應式數據203
12.3 reactive 函數204
12.4 封裝功能模塊，增加代碼復用206
12.5 Vue3 生命週期207
12.6 computed 的使用208
12.7 watch 監聽的使用211
12.8 依賴注入212
12.9 Refs 模板216
12.10 readonly()函數的使用218
12.11 watchEffect()函數的使用219
12.12 響應式系統工具集的使用220
12.12.1 unref()220
12.12.2 toRef()221
12.12.3 isRef()221
12.12.4 isProxy()221
12.12.5 isReactive()222
12.12.6 isReadonly()222

第 13 章 uni-app 核心基礎223
13.1 uni-app 概述223
13.1.1 創建 uni-app 項目224
13.1.2 uni-app 目錄結構226
13.1.3 uni-app 運行機制226
13.2 常用組件229
13.2.1 view 組件229
13.2.2 text 組件230
13.2.3 image 組件231
13.3 常用特效231
13.3.1 tabBar 導航使用232
13.3.2 swiper 輪播圖使用232
13.4 uni-app 屬性綁定和事件綁定233
13.4.1 屬性綁定234
13.4.2 事件綁定235
13.5 v-for 渲染數據235
13.6 uni-app 生命週期236
13.6.1 應用生命週期237
13.6.2 頁面生命週期237
13.6.3 下拉刷新生命週期函數237
13.6.4 上拉加載生命週期函數239
13.7 uni-app 發送 HTTP 請求240
13.8 跨端兼容241
13.8.1 控制頁面元素242
13.8.2 控制 CSS 樣式242
13.8.3 控制 JS243
13.9 頁面跳轉243
13.9.1 網址跳轉243
13.9.2 事件跳轉244
13.9.3 傳遞參數245

第 14 章 uni-app 企業項目實戰247
14.1 魯嗑瓜子首頁開發247
14.1.1 佈局首頁靜態頁247
14.1.2 調用數據接口渲染輪播圖252
14.1.3 首頁廣告版塊數據渲染253
14.1.4 首頁商家推薦版塊數據渲染254
14.1.5 首頁其他版塊數據渲染255
14.2 產品列表頁開發257
14.2.1 佈局產品列表靜態頁面257
14.2.2 渲染產品列表數據258
14.2.3 價格排序功能260
14.2.4 價格範圍篩選功能261
14.3 產品詳情頁開發263
14.4 App 打包265
14.4.1 H5 發布265
14.4.2 App 發布266