《Vue.js核心技術解析與uni-app跨平臺實戰(zhàn)開發(fā)》系統(tǒng)地介紹了Vue.js和uni-app的核心基礎理論及企業(yè)項目開發(fā),以實例的形式對Vue.js和uni-app進行深入淺出的講解!禫ue.js核心技術解析與uni-app跨平臺實戰(zhàn)開發(fā)》共分14章,內容包括Vue.js基礎入門、Vue.js綁定樣式及案例、Vue.js生命周期函數(shù)、Vue.js動畫、Vue.js組件、Vue.js路由、Vue.js高級進階、element-ui/mint-ui組件庫、axios發(fā)送HTTP請求、Vuex狀態(tài)管理、企業(yè)項目實戰(zhàn)、Vue3.X新特性解析、uni-app核心基礎、uni-app企業(yè)項目實戰(zhàn)等,書中大部分章節(jié)提供了實戰(zhàn)項目案例源碼。《Vue.js核心技術解析與uni-app跨平臺實戰(zhàn)開發(fā)》中每一個關鍵知識點均配套了同步視頻講解,以帶領讀者把書中的代碼敲一遍,這不僅能使讀者更加透徹地掌握知識點,實現(xiàn)獨立開發(fā)企業(yè)級項目的目標,還能使讀者及時地了解**技術動態(tài)。《Vue.js核心技術解析與uni-app跨平臺實戰(zhàn)開發(fā)》的讀者對象為網(wǎng)頁設計與制作人員、網(wǎng)站建設開發(fā)人員、相關專業(yè)的學生及網(wǎng)站制作愛好者。
?學習一門新的技術之前,我們一般會考慮3個問題:學習的這門技術是什么?為什么要學習這門技術?如何去學習?
針對第1個問題,本書將從HelloWorld開始,以案例的形式深入淺出地講解Vue.js和uni-app。
書中Vue.js部分共有12個章節(jié),包括Vue.js基礎入門、Vue.js綁定樣式及案例、Vue.js生命周期函數(shù)、Vue.js動畫、Vue.js組件、Vue.js路由、Vue.js高級進階、element-ui/mint-ui組件庫、axios發(fā)送HTTP請求、Vuex狀態(tài)管理、企業(yè)項目實戰(zhàn)、Vue3.X新特性解析等,力求讓零基礎讀者入門Vue.js。
uni-app部分分為2個章節(jié),包括uni-app核心基礎、uni-app企業(yè)項目實戰(zhàn)。大家可能會疑惑:為什么uni-app只用2個章節(jié)去講解?其主要原因為uni-app是依賴于Vue.js的,如果掌握了Vue.js,相當于掌握了80%的uni-app,本書通過一個企業(yè)案例幫助讀者把Vue.js和uni-app相結合,進行學習。
第2個問題:為什么要學習Vue.js和uni-app?
Vue.js作為國內流行的前端框架,具有易用、靈活、高效等特點,可以在工作中提高開發(fā)效率;還有一個原因是現(xiàn)在的前端工程師不只需要掌握HTML布局和JavaScript插件開發(fā),他們做得更多的是和后端工程師配合,實現(xiàn)數(shù)據(jù)的渲染。Vue.js框架恰好可以實現(xiàn)前端需求;后一個原因是當前國內Vue.js的市場狀況,Vue.js是我國程序員開發(fā)的前端框架,掌握Vue.js已經(jīng)成為國內企業(yè)招聘前端工程師的一項重要指標。
uni-app是一個基于Vue.js開發(fā)的前端應用框架,只需要編寫一套代碼,就可以發(fā)布到Android、iOS以及各種小程序平臺(微信、支付寶、百度等),當前官方文檔推出了10個平臺。也就是說,uni-app的出現(xiàn)幫助我們降低了學習成本,實現(xiàn)了程序的跨平臺應用。
第3個問題:如何學習Vue.js和uni-app?
在學習之前需要讀者先掌握HTML和CSS,并且需要有一定的JavaScript編程基礎。本書附贈微課,可掃描書中二維碼,觀看視頻講解,以幫助大家更加透徹地理解和掌握知識點,實現(xiàn)獨立開發(fā)企業(yè)項目的課程目標。
袁龍
2022.1
第 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 框架和庫的區(qū)別2
1.2 MVVM 前端視圖層開發(fā)理念2
1.3 創(chuàng)建 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 系統(tǒng)修飾符15
1.6.3 事件修飾符16
1.7 雙向數(shù)據(jù)綁定17
1.7.1 v-model 修飾符18
1.7.2 使用 v-model 實現(xiàn)計算器案例19
1.8 v-for 指令21
1.8.1 遍歷普通數(shù)組22
1.8.2 遍歷對象數(shù)組23
1.8.3 遍歷對象24
1.8.4 遍歷數(shù)字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 數(shù)組控制綁定樣式33
2.2 style 行內樣式綁定34
2.2.1 對象控制綁定行內樣式34
2.2.2 數(shù)組控制綁定行內樣式35
2.3 Vue 綁定樣式案例(標題排他)35
2.4 控制元素顯示隱藏37
2.4.1 v-if 和 v-show 指令37
2.4.2 v-if 實現(xiàn)選項卡案例39
2.5 簡單版購物車實例40
2.5.1 購物車實例簡介40
2.5.2 靜態(tài)頁面布局41
2.5.3 渲染購物車列表42
2.5.4 修改商品選中狀態(tài)43
2.5.5 記錄選中商品的總數(shù)量和總價格44
2.5.6 全選狀態(tài)46
2.5.7 商品數(shù)量增加或減少48
第 3 章 Vue.js 生命周期函數(shù)50
3.1 創(chuàng)建期間生命周期函數(shù)50
3.2 運行期間生命周期函數(shù)55
3.3 銷毀期間生命周期函數(shù)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 創(chuàng)建全局組件67
5.1.1 組件創(chuàng)建方式一67
5.1.2 組件創(chuàng)建方式二68
5.1.3 組件創(chuàng)建方式三68
5.2 創(chuàng)建私有組件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 創(chuàng)建項目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 路由守衛(wèi)117
7.10.1 全局路由守衛(wèi)117
7.10.2 組件內路由守衛(wèi)119
7.10.3 離開組件時守衛(wèi)120
第 8 章 element-ui/mint-ui 組件庫122
8.1 element-ui 使用步驟122
8.2 mint-ui 的使用124
第 9 章 axios 發(fā)送 HTTP 請求127
9.1 安裝 axios 127
9.1.1 組件中使用 axios128
9.1.2 配置全局域名129
9.1.3 代碼分離129
9.2 axios 傳遞參數(shù)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 狀態(tài)管理142
10.1 Vuex 基礎應用142
10.2 getters 的使用144
10.3 mutations 的使用145
10.4 actions 的使用148
10.5 Vuex 代碼分離151
10.6 輔助函數(shù)152
10.6.1 mapState 輔助函數(shù)152
10.6.2 mapGetters 輔助函數(shù)153
10.6.3 mapMutations 輔助函數(shù)154
10.6.4 mapActions 輔助函數(shù)155
10.7 Vuex 實例之登錄退出156
10.7.1 vue-cli 創(chuàng)建項目站點156
10.7.2 Vuex 修改登錄狀態(tài)158
第 11 章 企業(yè)項目實戰(zhàn)166
11.1 vue-cli 創(chuàng)建項目166
11.2 首頁開發(fā)168
11.2.1 布局首頁靜態(tài)頁面170
11.2.2 使用 axios 獲取輪播圖176
11.2.3 首頁廣告版塊數(shù)據(jù)渲染178
11.2.4 首頁商家推薦版塊數(shù)據(jù)渲染180
11.2.5 首頁其他版塊數(shù)據(jù)渲染181
11.3 網(wǎng)頁底部信息和產品列表頁面開發(fā)182
11.3.1 產品列表靜態(tài)頁面布局184
11.3.2 渲染全部產品頁面數(shù)據(jù)186
11.3.3 產品價格排序功能189
11.3.4 產品價格范圍篩選功能190
11.4 element-ui 實現(xiàn)產品分頁192
11.5 產品詳情頁面開發(fā)194
第 12 章 Vue3.X 新特性解析198
12.1 Vue3.0 新特性199
12.2 什么是 Composition API 201
12.2.1 setup 函數(shù)的特點202
12.2.2 定義響應式數(shù)據(jù)203
12.3 reactive 函數(shù)204
12.4 封裝功能模塊,增加代碼復用206
12.5 Vue3 生命周期207
12.6 computed 的使用208
12.7 watch 監(jiān)聽的使用211
12.8 依賴注入212
12.9 Refs 模板216
12.10 readonly()函數(shù)的使用218
12.11 watchEffect()函數(shù)的使用219
12.12 響應式系統(tǒng)工具集的使用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 創(chuàng)建 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 渲染數(shù)據(jù)235
13.6 uni-app 生命周期236
13.6.1 應用生命周期237
13.6.2 頁面生命周期237
13.6.3 下拉刷新生命周期函數(shù)237
13.6.4 上拉加載生命周期函數(shù)239
13.7 uni-app 發(fā)送 HTTP 請求240
13.8 跨端兼容241
13.8.1 控制頁面元素242
13.8.2 控制 CSS 樣式242
13.8.3 控制 JS243
13.9 頁面跳轉243
13.9.1 網(wǎng)址跳轉243
13.9.2 事件跳轉244
13.9.3 傳遞參數(shù)245
第 14 章 uni-app 企業(yè)項目實戰(zhàn)247
14.1 魯嗑瓜子首頁開發(fā)247
14.1.1 布局首頁靜態(tài)頁247
14.1.2 調用數(shù)據(jù)接口渲染輪播圖252
14.1.3 首頁廣告版塊數(shù)據(jù)渲染253
14.1.4 首頁商家推薦版塊數(shù)據(jù)渲染254
14.1.5 首頁其他版塊數(shù)據(jù)渲染255
14.2 產品列表頁開發(fā)257
14.2.1 布局產品列表靜態(tài)頁面257
14.2.2 渲染產品列表數(shù)據(jù)258
14.2.3 價格排序功能260
14.2.4 價格范圍篩選功能261
14.3 產品詳情頁開發(fā)263
14.4 App 打包265
14.4.1 H5 發(fā)布265
14.4.2 App 發(fā)布266