循序漸進(jìn)Vue.js 3前端開(kāi)發(fā)實(shí)戰(zhàn)
鏈接：pan.baidu.com/s/16o9VXtSHJkn1VpVmvrK2NA?pwd=ptyz?
提取碼：ptyz
Vue.js 3可以讓你的前端項(xiàng)目開(kāi)發(fā)效率成倍提升，無(wú)論你是否接觸過(guò)Vue，本書(shū)都會(huì)讓你體驗(yàn)到使用Vue.js 3框架高效開(kāi)發(fā)商業(yè)項(xiàng)目的魅力。
本書(shū)以一個(gè)多年前端“老司機(jī)”的視角，循序漸進(jìn)地講解了Vue框架的新特性及其各項(xiàng)功能的用法，原理與實(shí)踐并重，代碼注解詳盡，并列舉了大量開(kāi)發(fā)范例，以提升讀者的動(dòng)手能力。
為使讀者能夠開(kāi)發(fā)商業(yè)項(xiàng)目，本書(shū)除了介紹Vue.js框架本身外，還講解了Vue.js在開(kāi)發(fā)商業(yè)項(xiàng)目中需要用到的相關(guān)框架和工具，如狀態(tài)管理框架Vuex、路由框架Vue-Route、UI框架Element Plus、網(wǎng)絡(luò)請(qǐng)求框架Vue-Axios、構(gòu)建工具Vue CLI及其Vite等，活用這些框架可以讓你輕松地開(kāi)發(fā)出自己的商業(yè)應(yīng)用。
作者還為本書(shū)錄制了配套的視頻教程，對(duì)于初學(xué)者來(lái)說(shuō)，通過(guò)觀看教學(xué)視頻，可以大幅降低學(xué)習(xí)難度，提升學(xué)習(xí)效率，可以說(shuō)是物超所值。
本書(shū)各章還專(zhuān)門(mén)設(shè)計(jì)了動(dòng)手練習(xí)題，以幫助讀者鞏固知識(shí)，還提供了完整的源代碼和PPT學(xué)習(xí)課件，掃碼即可下載使用。
內(nèi)容簡(jiǎn)介
本書(shū)以一個(gè)多年前端“老司機(jī)”的視角，循序漸進(jìn)地介紹當(dāng)前流行的前端框架Vue.js 3的新特性、各項(xiàng)功能及其在商業(yè)開(kāi)發(fā)中的應(yīng)用。全書(shū)共15章，第1~6章介紹Vue.js 3的模板、組件、交互處理等基礎(chǔ)知識(shí)；第7章介紹Vue.js 3框架的響應(yīng)式原理及組合式API；第8章介紹使用Vue.js 3框架開(kāi)發(fā)前端動(dòng)畫(huà)效果；第9章介紹開(kāi)發(fā)大型項(xiàng)目必備的腳手架工具VueCli和Vite；第10章介紹基于Vue.js 3的UI框架Element Plus；第11~13章分別介紹網(wǎng)絡(luò)請(qǐng)求框架vue-axios、路由管理框架Vue Router、狀態(tài)管理框架Vuex；第14章和第15章介紹兩個(gè)相對(duì)完整的項(xiàng)目的開(kāi)發(fā)，即學(xué)習(xí)網(wǎng)站和電商后臺(tái)系統(tǒng)。本書(shū)試圖介紹Vue.js 3全家桶及周邊框架和工具的綜合應(yīng)用，旨在使讀者通過(guò)閱讀本書(shū)開(kāi)發(fā)自己的應(yīng)用程序。本書(shū)還在各章安排了小型范例和練習(xí)題，并提供了教學(xué)視頻、源代碼及PPT課件。
本書(shū)既可以入門(mén)，也可以進(jìn)階，適合Vue.js 3初學(xué)者和前端開(kāi)發(fā)人員使用，也可以作為網(wǎng)課、培訓(xùn)機(jī)構(gòu)與大中專(zhuān)院校的教學(xué)用書(shū)。
作者簡(jiǎn)介
張益琿，從業(yè)7年，多年移動(dòng)與前端開(kāi)發(fā)經(jīng)驗(yàn)，曾就職于國(guó)內(nèi)知名電商網(wǎng)站，從事移動(dòng)端應(yīng)用程序的業(yè)務(wù)開(kāi)發(fā)與性能優(yōu)化工作，目前在國(guó)內(nèi)知名社交產(chǎn)品公司從事IM系統(tǒng)的架構(gòu)設(shè)計(jì)工作。對(duì)移動(dòng)跨平臺(tái)開(kāi)發(fā)、前端開(kāi)發(fā)、React Native和Flutter跨平臺(tái)開(kāi)發(fā)及JavaScript前端開(kāi)發(fā)都擁有豐富的經(jīng)驗(yàn)。已出版多部編程著作。開(kāi)源中國(guó)特邀技術(shù)專(zhuān)家，發(fā)表相關(guān)技術(shù)博客400余篇，訪問(wèn)量100萬(wàn)余次。
目錄
第1章 從前端基礎(chǔ)到Vue.js 3 1
1.1 前端技術(shù)演進(jìn) 2
1.2 HTML入門(mén) 3
1.2.1 準(zhǔn)備開(kāi)發(fā)工具 3
1.2.2 HTML中的基礎(chǔ)標(biāo)簽 5
1.3 CSS入門(mén) 8
1.3.1 CSS選擇器入門(mén) 8
1.3.2 CSS樣式入門(mén) 11
1.4 JavaScript入門(mén) 14
1.4.1 為什么需要JavaScript 14
1.4.2 JavaScript語(yǔ)法簡(jiǎn)介 16
1.5 漸進(jìn)式開(kāi)發(fā)框架Vue 18
1.5.1 第一個(gè)Vue應(yīng)用 18
1.5.2 范例：實(shí)現(xiàn)一個(gè)簡(jiǎn)單的用戶登錄頁(yè)面 19
1.5.3 Vue 3的新特性 21
1.5.4 為什么要使用Vue框架 22
1.6 小結(jié)與練習(xí) 23
第2章 Vue模板應(yīng)用 24
2.1 模板基礎(chǔ) 25
2.1.1 模板插值 25
2.1.2 模板指令 28
2.2 條 件 渲 染 29
2.2.1 使用v-if指令進(jìn)行條件渲染 30
2.2.2 使用v-show指令進(jìn)行條件渲染 32
2.3 循 環(huán) 渲 染 33
2.3.1 v-for指令的使用方法 33
2.3.2 v-for指令的高級(jí)用法 36
2.4 范例：實(shí)現(xiàn)待辦任務(wù)列表應(yīng)用 37
2.4.1 步驟一：使用HTML搭建應(yīng)用框架結(jié)構(gòu) 37
2.4.2 步驟二：實(shí)現(xiàn)待辦任務(wù)列表的邏輯開(kāi)發(fā) 38
2.5 小結(jié)與練習(xí) 40
第3章 Vue組件的屬性和方法 41
3.1 屬性與方法基礎(chǔ) 41
3.1.1 屬性基礎(chǔ) 42
3.1.2 方法基礎(chǔ) 42
3.2 計(jì)算屬性和偵聽(tīng)器 43
3.2.1 計(jì)算屬性 43
3.2.2 使用計(jì)算屬性還是函數(shù) 44
3.2.3 計(jì)算屬性的賦值 45
3.2.4 屬性偵聽(tīng)器 46
3.3 進(jìn)行函數(shù)限流 47
3.3.1 手動(dòng)實(shí)現(xiàn)一個(gè)簡(jiǎn)易的限流函數(shù) 48
3.3.2 使用Lodash庫(kù)進(jìn)行函數(shù)限流 49
3.4 表單數(shù)據(jù)的雙向綁定 50
3.4.1 文本輸入框 50
3.4.2 多行文本輸入?yún)^(qū)域 51
3.4.3 復(fù)選框與單選框 51
3.4.4 選擇列表 52
3.4.5 兩個(gè)常用的修飾符 53
3.5 樣 式 綁 定 53
3.5.1 為HTML標(biāo)簽綁定Class屬性 53
3.5.2 綁定內(nèi)聯(lián)樣式 55
3.6 范例：實(shí)現(xiàn)一個(gè)功能完整的用戶注冊(cè)頁(yè)面 56
3.6.1 步驟一：搭建用戶注冊(cè)頁(yè)面 56
3.6.2 步驟二：實(shí)現(xiàn)注冊(cè)頁(yè)面的用戶交互 59
3.7 小結(jié)與練習(xí) 61
第4章 處理用戶交互 63
4.1 事件的監(jiān)聽(tīng)與處理 63
4.1.1 事件監(jiān)聽(tīng)示例 63
4.1.2 多事件處理 65
4.1.3 事件修飾符 65
4.2 Vue中的事件類(lèi)型 68
4.2.1 常用事件類(lèi)型 68
4.2.2 按鍵修飾符 70
4.3 范例1：隨鼠標(biāo)移動(dòng)的小球 72
4.4 范例2：彈球游戲 74
4.5 小結(jié)與練習(xí) 77
第5章 組件基礎(chǔ) 78
5.1 關(guān)于Vue應(yīng)用與組件 78
5.1.1 Vue應(yīng)用的數(shù)據(jù)配置選項(xiàng) 79
5.1.2 定義組件 80
5.2 組件中的數(shù)據(jù)與事件的傳遞 81
5.2.1 為組件添加外部屬性 82
5.2.2 處理組件事件 83
5.2.3 在組件上使用v-model指令 84
5.3 自定義組件的插槽 86
5.3.1 組件插槽的基本用法 87
5.3.2 多具名插槽的用法 88
5.4 動(dòng)態(tài)組件的簡(jiǎn)單應(yīng)用 90
5.5 范例：開(kāi)發(fā)一款小巧的開(kāi)關(guān)按鈕組件 91
5.6 小結(jié)與練習(xí) 94
第6章 組件進(jìn)階 95
6.1 組件的生命周期與高級(jí)配置 95
6.1.1 生命周期方法 96
6.1.2 應(yīng)用的全局配置選項(xiàng) 99
6.1.3 組件的注冊(cè)方式 100
6.2 組件Props屬性的高級(jí)用法 101
6.2.1 對(duì)Prop屬性進(jìn)行驗(yàn)證 101
6.2.2 Props的只讀性質(zhì) 104
6.2.3 組件數(shù)據(jù)注入 105
6.3 組件Mixin技術(shù) 108
6.3.1 使用Mixin來(lái)定義組件 108
6.3.2 Mixin選項(xiàng)的合并 110
6.3.3 進(jìn)行全局Mixin 111
6.4 使用自定義指令 111
6.4.1 認(rèn)識(shí)自定義指令 112
6.4.2 自定義指令的參數(shù) 113
6.5 使用組件的Teleport功能開(kāi)發(fā)全局彈窗 113
6.6 小結(jié)與練習(xí) 116
第7章 Vue響應(yīng)式編程 117
7.1 響應(yīng)式編程的原理及在Vue中的應(yīng)用 117
7.1.1 手動(dòng)追蹤變量的變化 118
7.1.2 Vue中的響應(yīng)式對(duì)象 120
7.1.3 獨(dú)立的響應(yīng)式值Ref的應(yīng)用 121
7.2 響應(yīng)式的計(jì)算與監(jiān)聽(tīng) 123
7.2.1 關(guān)于計(jì)算變量 124
7.2.2 監(jiān)聽(tīng)響應(yīng)式變量 125
7.3 組合式API的應(yīng)用 127
7.3.1 關(guān)于setup方法 127
7.3.2 在setup方法中定義生命周期行為 129
7.4 范例：實(shí)現(xiàn)支持搜索和篩選的用戶列表 130
7.4.1 常規(guī)風(fēng)格的示例工程開(kāi)發(fā) 130
7.4.2 使用組合式API重構(gòu)用戶列表頁(yè)面 133
7.5 小結(jié)與練習(xí) 136
第8章 動(dòng)畫(huà) 137
8.1 使用CSS3創(chuàng)建動(dòng)畫(huà) 137
8.1.1 transition過(guò)渡動(dòng)畫(huà) 138
8.1.2 keyframes動(dòng)畫(huà) 139
8.2 使用JavaScript的方式實(shí)現(xiàn)動(dòng)畫(huà)效果 141
8.3 Vue過(guò)渡動(dòng)畫(huà) 142
8.3.1 定義過(guò)渡動(dòng)畫(huà) 142
8.3.2 設(shè)置動(dòng)畫(huà)過(guò)程中的監(jiān)聽(tīng)回調(diào) 146
8.3.3 多個(gè)組件的過(guò)渡動(dòng)畫(huà) 147
8.3.4 列表過(guò)渡動(dòng)畫(huà) 149
8.4 范例：優(yōu)化用戶列表頁(yè)面 150
8.5 小結(jié)與練習(xí) 152
第9章 構(gòu)建工具Vue CLI的使用 153
9.1 Vue CLI工具入門(mén) 153
9.1.1 Vue CLI的安裝 154
9.1.2 快速創(chuàng)建項(xiàng)目 155
9.2 Vue CLI項(xiàng)目模板工程 157
9.2.1 模板工程的目錄結(jié)構(gòu) 157
9.2.2 運(yùn)行Vue項(xiàng)目工程 161
9.3 在項(xiàng)目中使用依賴(lài) 162
9.4 工程構(gòu)建 164
9.5 新一代前端構(gòu)建工具Vite 165
9.5.1 Vite與Vue CLI的比較 165
9.5.2 體驗(yàn)Vite構(gòu)建工具 165
9.6 小結(jié)與練習(xí) 167
第10章 基于Vue 3的UI組件庫(kù)——Element Plus 168
10.1 Element Plus入門(mén) 168
10.1.1 Element Plus的安裝與使用 169
10.1.2 按鈕組件 171
10.1.3 標(biāo)簽組件 173
10.1.4 空態(tài)圖與加載占位圖組件 176
10.1.5 圖片與頭像組件 179
10.2 表單類(lèi)組件 180
10.2.1 單選框與復(fù)選框 181
10.2.2 標(biāo)準(zhǔn)輸入框組件 182
10.2.3 帶推薦列表的輸入框組件 184
10.2.4 數(shù)字輸入框 186
10.2.5 選擇列表 187
10.2.6 多級(jí)列表組件 190
10.3 開(kāi)關(guān)與滑塊組件 193
10.3.1 開(kāi)關(guān)組件 193
10.3.2 滑塊組件 194
10.4 選擇器組件 196
10.4.1 時(shí)間選擇器 197
10.4.2 日期選擇器 198
10.4.3 顏色選擇器 200
10.5 提示類(lèi)組件 201
10.5.1 警告組件 201
10.5.2 消息提示 202
10.5.3 通知組件 204
10.6 數(shù)據(jù)承載相關(guān)組件 205
10.6.1 表格組件 205
10.6.2 導(dǎo)航菜單組件 208
10.6.3 標(biāo)簽頁(yè)組件 210
10.6.4 抽屜組件 211
10.6.5 布局容器組件 212
10.7 實(shí)戰(zhàn)：實(shí)現(xiàn)一個(gè)教務(wù)系統(tǒng)學(xué)生列表頁(yè)面 214
10.8 小結(jié)與練習(xí) 217
第11章 基于Vue的網(wǎng)絡(luò)框架——vue-axios的應(yīng)用 219
11.1 使用vue-axios請(qǐng)求天氣數(shù)據(jù) 219
11.1.1 使用互聯(lián)網(wǎng)上免費(fèi)的數(shù)據(jù)服務(wù) 219
11.1.2 使用vue-axios進(jìn)行數(shù)據(jù)請(qǐng)求 222
11.2 vue-axios實(shí)用功能介紹 224
11.2.1 通過(guò)配置的方式進(jìn)行數(shù)據(jù)請(qǐng)求 224
11.2.2 請(qǐng)求的配置與響應(yīng)數(shù)據(jù)結(jié)構(gòu) 225
11.2.3 攔截器的使用 226
11.3 范例：實(shí)現(xiàn)一個(gè)天氣預(yù)報(bào)應(yīng)用 227
11.3.1 搭建頁(yè)面框架 227
11.3.2 實(shí)現(xiàn)天氣預(yù)報(bào)應(yīng)用的核心邏輯 229
11.4 小結(jié)與練習(xí) 231
第12章 Vue路由管理 232
12.1 Vue Router的安裝與簡(jiǎn)單使用 232
12.1.1 Vue Router的安裝 233
12.1.2 一個(gè)簡(jiǎn)單的Vue Router使用示例 233
12.2 帶參數(shù)的動(dòng)態(tài)路由 235
12.2.1 路由參數(shù)匹配 235
12.2.2 路由匹配的語(yǔ)法規(guī)則 237
12.2.3 路由的嵌套 239
12.3 頁(yè)面導(dǎo)航 240
12.3.1 使用路由方法 240
12.3.2 導(dǎo)航歷史控制 242
12.4 關(guān)于路由的命名 242
12.4.1 使用名稱(chēng)進(jìn)行路由切換 243
12.4.2 路由視圖命名 243
12.4.3 使用別名 245
12.4.4 路由重定向 245
12.5 關(guān)于路由傳參 246
12.6 路由導(dǎo)航守衛(wèi) 247
12.6.1 定義全局的導(dǎo)航守衛(wèi) 248
12.6.2 為特定的路由注冊(cè)導(dǎo)航守衛(wèi) 249
12.7 動(dòng)態(tài)路由 250
12.8 小結(jié)與練習(xí) 252
第13章 Vue狀態(tài)管理 253
13.1 認(rèn)識(shí)Vuex框架 253
13.1.1 關(guān)于狀態(tài)管理 254
13.1.2 安裝與體驗(yàn)Vuex 255
13.2 Vuex中的一些核心概念 258
13.2.1 Vuex中的狀態(tài)state 258
13.2.2 Vuex中的Getter方法 260
13.2.3 Vuex中的Mutation 261
13.2.4 Vuex中的Action 262
13.2.5 Vuex中的Module 263
13.3 小結(jié)與練習(xí) 266
第14章 項(xiàng)目演練一：開(kāi)發(fā)一個(gè)文檔學(xué)習(xí)網(wǎng)站 267
14.1 網(wǎng)站框架的搭建 267
14.2 配置專(zhuān)題與文章目錄 272
14.3 渲染文章筆記內(nèi)容 274
14.4 小結(jié)與練習(xí) 278
第15章 項(xiàng)目演練二：電商后臺(tái)管理系統(tǒng)實(shí)戰(zhàn) 279
15.1 用戶登錄模塊開(kāi)發(fā) 279
15.1.1 項(xiàng)目搭建 279
15.1.2 用戶登錄頁(yè)面的開(kāi)發(fā) 282
15.2 項(xiàng)目主頁(yè)搭建 285
15.2.1 主頁(yè)框架搭建 285
15.2.2 完善注銷(xiāo)功能 288
15.3 訂單管理模塊的開(kāi)發(fā) 289
15.3.1 使用Mock.js進(jìn)行模擬數(shù)據(jù)的生成 289
15.3.2 編寫(xiě)工具類(lèi)與全局樣式 290
15.3.3 完善訂單管理頁(yè)面 291
15.4 商品管理模塊的開(kāi)發(fā) 297
15.4.1 商品管理列表頁(yè)的開(kāi)發(fā) 297
15.4.2 新建商品的基礎(chǔ)配置 302
15.4.3 新建商品的價(jià)格和庫(kù)存配置 305
15.4.4 新建商品的詳情設(shè)置 308
15.4.5 添加商品分類(lèi) 310
15.5 店長(zhǎng)管理模塊的開(kāi)發(fā) 312
15.5.1 店長(zhǎng)列表的開(kāi)發(fā) 312
15.5.2 店長(zhǎng)審批列表與店長(zhǎng)訂單 315
15.6 財(cái)務(wù)管理與數(shù)據(jù)統(tǒng)計(jì)功能模塊開(kāi)發(fā) 316
15.6.1 交易明細(xì)與財(cái)務(wù)對(duì)賬單 316
15.6.2 數(shù)據(jù)統(tǒng)計(jì)模塊的開(kāi)發(fā) 317
15.7 小結(jié)與練習(xí) 322
查看全部↓
前言/序言
前 言
當(dāng)下互聯(lián)網(wǎng)已經(jīng)成為人們生活中必不可少的一部分，無(wú)論是在互聯(lián)網(wǎng)上查詢(xún)信息、玩游戲，還是通過(guò)互聯(lián)網(wǎng)購(gòu)物、付款，都離不開(kāi)成千上萬(wàn)的互聯(lián)網(wǎng)應(yīng)用程序的支持。不知你有沒(méi)有想過(guò)，這些互聯(lián)網(wǎng)應(yīng)用是如何開(kāi)發(fā)出來(lái)的呢？開(kāi)發(fā)一個(gè)外觀精美、功能強(qiáng)大的網(wǎng)站需要多長(zhǎng)時(shí)間？我們是否具備這樣的能力來(lái)將自己的想法、創(chuàng)意開(kāi)發(fā)成產(chǎn)品？如果你曾有過(guò)類(lèi)似的思考，那么本書(shū)可以幫你快速掌握這一技能。
閱讀任何一本圖書(shū)的過(guò)程本身就是一個(gè)學(xué)習(xí)的過(guò)程，擴(kuò)展自己的知識(shí)邊界、提高自己的技能水平可能并非一件容易的事，但卻是一件有趣的事。如果你能夠自主開(kāi)發(fā)功能完備的商業(yè)項(xiàng)目，能夠通過(guò)自己開(kāi)發(fā)的應(yīng)用程序?yàn)楦嗟娜藥?lái)生活上的幫助，這一定是一件非常令人快樂(lè)的事情。因此，若要品嘗幸福的果實(shí)，一定要經(jīng)歷開(kāi)花結(jié)果過(guò)程中的辛勞，本書(shū)會(huì)盡量幫助你將這一過(guò)程縮短。
