Vue.js 3.x+Element Plus從入門到項(xiàng)目實(shí)踐 版權(quán)信息
- ISBN:9787302667995
- 條形碼:9787302667995 ; 978-7-302-66799-5
- 裝幀:一般膠版紙
- 冊數(shù):暫無
- 重量:暫無
- 所屬分類:>
Vue.js 3.x+Element Plus從入門到項(xiàng)目實(shí)踐 本書特色
《Vue.js 3.x Element Plus從入門到項(xiàng)目實(shí)踐》的特色如下:
1. 零基礎(chǔ)、入門級的講解
無論您是否從事計(jì)算機(jī)相關(guān)行業(yè),也無論您是否接觸過Vue.js Element Plus框架,都能從本書中找到適合的起點(diǎn)。
2. 實(shí)用、專業(yè)的案例和項(xiàng)目
本書在編排上緊密結(jié)合學(xué)習(xí)Vue.js Element Plus框架技術(shù)的過程,從Vue.js Element Plus框架基本操作開始,逐步帶領(lǐng)讀者學(xué)習(xí)Vue.js Element Plus框架的各種應(yīng)用技巧,側(cè)重實(shí)戰(zhàn)技術(shù),使用簡單易懂的實(shí)際案例進(jìn)行分析和操作指導(dǎo),讓讀者學(xué)起來簡明輕松,操作起來有章可循。
3. 隨時(shí)隨地學(xué)習(xí)
本書提供了微課視頻,通過手機(jī)掃碼即可觀看,隨時(shí)隨地解決學(xué)習(xí)中的困惑。
4. 細(xì)致入微、貼心提示
本書在講解過程中,在各章中使用了“注意”“提示”“技巧”等小欄目,使讀者在學(xué)習(xí)時(shí)能更清楚地了解相關(guān)操作、理解相關(guān)概念,并輕松掌握各種操作技巧。
5. 贈(zèng)送超值資源
贈(zèng)送大量資源,包括本書案例源代碼、同步教學(xué)視頻、精美教學(xué)幻燈片、教學(xué)大綱、30套熱門Vue.js項(xiàng)目源碼、160套jQuery精彩案例、名企網(wǎng)站前端開發(fā)招聘考試題庫、畢業(yè)求職面試資源庫。
Vue.js 3.x+Element Plus從入門到項(xiàng)目實(shí)踐 內(nèi)容簡介
本書通過實(shí)例深入淺出地講解Vue.js框架的各項(xiàng)實(shí)戰(zhàn)技能。
本書共l5章,主要講解了搭建Vue+Element Plus開發(fā)環(huán)境、模板語法和指令、計(jì)算屬性和偵聽器、雙向數(shù)據(jù)綁定、事件處理、組件和組合API、項(xiàng)目腳手架ue-cli和Vite、前端路由、狀態(tài)管理Vuex、Element Plus基礎(chǔ)入門、Element Plus中的表單和Element Plus中的數(shù)據(jù)等內(nèi)容。*后講述了3個(gè)行業(yè)熱點(diǎn)項(xiàng)目的開發(fā),包括科技企業(yè)網(wǎng)站系統(tǒng)、圖書管理系統(tǒng)和企業(yè)辦公自動(dòng)化系統(tǒng)。
本書適合任何想學(xué)習(xí)Vue,js和Element Plus框架的人員,無論您是否從事計(jì)算機(jī)相關(guān)行業(yè),也無論您是否接觸過Vue,js和Element Plus框架,通過學(xué)習(xí)本書內(nèi)容均可快速掌握Vue.js和Element Plus框架設(shè)計(jì)的方法和技巧。
Vue.js 3.x+Element Plus從入門到項(xiàng)目實(shí)踐 目錄
第1章 搭建Vue Element Plus開發(fā)環(huán)境 1
1.1 Vue.js 3.x概述 1
1.1.1 MVVM模式 1
1.1.2 Vue.js的概念 2
1.1.3 Vue.js的數(shù)據(jù)驅(qū)動(dòng)原理 3
1.2 為什么要使用Vue.js 4
1.2.1 傳統(tǒng)的前端開發(fā)模式 4
1.2.2 Vue.js開發(fā)模式 5
1.3 安裝Vue.js 5
1.3.1 直接使用引入 5
1.3.2 使用NPM方式 5
1.3.3 使用命令行工具(CLI)方式 6
1.3.4 使用Vite方式 6
1.4 綜合案例1——**個(gè)Vue.js程序 6
1.5 安裝Element Plus 7
1.6 綜合案例2——**個(gè)Vue.js Element Plus案例 8
第2章 模板語法和指令 10
2.1 Vue.js實(shí)例 10
2.1.1 創(chuàng)建一個(gè)Vue.js實(shí)例 10
2.1.2 數(shù)據(jù)與方法 11
2.1.3 實(shí)例化多個(gè)對象 11
2.2 模板語法 15
2.2.1 插值 15
2.2.2 指令 18
2.2.3 縮寫 18
2.3 基本指令 19
2.3.1 v-cloak 19
2.3.2 v-once 20
2.3.3 v-text與v-html 20
2.3.4 v-bind 21
2.3.5 v-on 22
2.4 條件渲染 24
2.4.1 v-if 24
2.4.2 在元素上使用v-if條件渲染分組 25
2.4.3 v-else 26
2.4.4 v-else-if 27
2.4.5 v-show 28
2.4.6 v-if與v-show的區(qū)別 29
2.5 列表渲染 31
2.5.1 使用v-for指令遍歷元素 31
2.5.2 維護(hù)狀態(tài) 34
2.5.3 數(shù)組更新檢測 35
2.5.4 對象變更檢測注意事項(xiàng) 37
2.5.5 在上使用v-for 38
2.5.6 v-for與v-if一同使用 39
2.6 自定義指令 40
2.7 綜合案例1——設(shè)計(jì)商品采購列表 41
2.8 綜合案例2——通過插值語法實(shí)現(xiàn)商品信息組合 43
第3章 計(jì)算屬性和偵聽器 44
3.1 計(jì)算屬性computed 44
3.2 計(jì)算屬性與方法的區(qū)別 45
3.3 監(jiān)聽器 47
3.3.1 回調(diào)值為方法 48
3.3.2 回調(diào)值為對象 49
3.4 綜合案例——通過計(jì)算屬性設(shè)計(jì)注冊表 51
第4章 雙向數(shù)據(jù)綁定 55
4.1 綁定HTML樣式(Class) 55
4.1.1 數(shù)組語法 55
4.1.2 對象語法 57
4.1.3 用在組件上 60
4.2 綁定內(nèi)聯(lián)樣式(style) 60
4.2.1 對象語法 60
4.2.2 數(shù)組語法 62
4.3 雙向綁定 63
4.4 基本用法 64
4.4.1 文本 64
4.4.2 多行文本 65
4.4.3 復(fù)選框 66
4.4.4 單選按鈕 67
4.4.5 選擇框 68
4.5 值綁定 70
4.5.1 復(fù)選框 70
4.5.2 單選按鈕 71
4.5.3 選擇框的選項(xiàng) 72
4.6 修飾符 73
4.6.1 lazy 73
4.6.2 number 73
4.6.3 trim 74
4.7 綜合案例1——破壞瓶子小游戲 75
4.8 綜合案例2——設(shè)計(jì)網(wǎng)上商城購物車效果 77
第5章 事件處理 82
5.1 監(jiān)聽事件 82
5.2 事件處理方法 83
5.3 事件修飾符 87
5.3.1 stop 88
5.3.2 capture 90
5.3.3 self 91
5.3.4 once 93
5.3.5 prevent 93
5.3.6 passive 94
5.4 按鍵修飾符 95
5.5 系統(tǒng)修飾鍵 97
5.6 綜合案例——設(shè)計(jì)商城tab欄切換 98
第6章 精通組件和組合API 100
6.1 組件是什么 100
6.2 組件的注冊 100
6.2.1 全局注冊 101
6.2.2 局部注冊 102
6.3 使用prop向子組件傳遞數(shù)據(jù) 102
6.3.1 prop的基本用法 103
6.3.2 單向數(shù)據(jù)流 106
6.3.3 prop驗(yàn)證 106
6.3.4 非prop的屬性 108
6.4 子組件向父組件傳遞數(shù)據(jù) 110
6.4.1 監(jiān)聽子組件事件 110
6.4.2 將原生事件綁定到組件 111
6.4.3 sync修飾符 112
6.5 插槽 114
6.5.1 插槽的基本用法 114
6.5.2 編譯作用域 115
6.5.3 默認(rèn)內(nèi)容 115
6.5.4 命名插槽 116
6.5.5 作用域插槽 119
6.5.6 解構(gòu)插槽prop 121
6.6 為什么要引入組合API 122
6.7 setup()函數(shù) 123
6.8 響應(yīng)式API 124
6.8.1 reactive()方法和watchEffect()
方法 124
6.8.2 ref()方法 125
6.8.3 readonly()方法 125
6.8.4 computed()方法 126
6.8.5 watch()方法 127
6.9 綜合案例1——開發(fā)待辦事項(xiàng)功能 127
6.10 綜合案例2——設(shè)計(jì)商城輪播效果圖 129
第7章 項(xiàng)目腳手架vue-cli和Vite 132
7.1 腳手架的組件 132
7.2 腳手架環(huán)境搭建 133
7.3 安裝腳手架 135
7.4 創(chuàng)建項(xiàng)目 136
7.4.1 使用命令創(chuàng)建項(xiàng)目 136
7.4.2 使用圖形化界面創(chuàng)建項(xiàng)目 138
7.5 分析項(xiàng)目結(jié)構(gòu) 140
7.6 構(gòu)建工具Vite 142
第8章 玩轉(zhuǎn)前端路由 144
8.1 使用Vue Router實(shí)現(xiàn)Vue前端路由控制 144
8.1.1 前端路由的實(shí)現(xiàn)方式 144
8.1.2 路由實(shí)現(xiàn) 145
8.2 Vue Router中的常用技術(shù) 148
8.2.1 命名路由 148
8.2.2 命名視圖 150
8.2.3 路由傳參 154
8.3 編程式導(dǎo)航 158
8.4 組件與Vue Router間解耦 162
8.4.1 布爾模式 162
8.4.2 對象模式 165
8.4.3 函數(shù)模式 167
第9章 狀態(tài)管理Vuex 171
9.1 什么是Vuex 171
9.1.1 什么是狀態(tài)管理模式 171
9.1.2 什么情況下使用Vuex 172
9.2 使用Vuex 173
9.3 在項(xiàng)目中使用Vuex 173
9.3.1 搭建一個(gè)項(xiàng)目 173
9.3.2 state對象 175
9.3.3 getter對象 176
9.3.4 mutation對象 178
9.3.5 action對象 179
第10章 Element Plus基礎(chǔ)入門 182
10.1 頁面布局的方式 182
10.1.1 創(chuàng)建頁面基礎(chǔ)布局 182
10.1.2 使用布局容器組件 184
10.2 內(nèi)置過渡動(dòng)畫 186
10.2.1 淡入淡出動(dòng)畫 186
10.2.2 縮放動(dòng)畫 187
10.2.3 折疊展開動(dòng)畫 188
10.3 基本組件 189
10.3.1 按鈕組件 189
10.3.2 文字鏈接組件 190
10.3.3 間距組件 191
10.3.4 滾動(dòng)條組件 193
10.4 提示類組件 194
10.4.1 警告組件 195
10.4.2 通知組件 196
10.4.3 消息提示組件 197
10.5 綜合案例——設(shè)計(jì)一個(gè)滾動(dòng)菜單欄的組件 198
第11章 Element Plus中的表單 201
11.1 表單類組件 201
11.1.1 單選按鈕 201
11.1.2 復(fù)選框 202
11.1.3 標(biāo)準(zhǔn)輸入框組件 204
11.1.4 帶推薦列表的輸入框組件 206
11.1.5 計(jì)數(shù)器 207
11.1.6 選擇列表 208
11.1.7 多級列表組件 211
11.2 開關(guān)組件與滑塊組件 212
11.2.1 開關(guān)組件 212
11.2.2 滑塊組件 213
11.3 選擇器組件 215
11.3.1 時(shí)間選擇器 215
11.3.2 日期選擇器 217
11.3.3 顏色選擇器 218
11.4 上傳組件 219
11.5 評分組件 221
11.6 穿梭框組件 222
11.7 綜合案例——設(shè)計(jì)一個(gè)商城活動(dòng)頁面 223
第12章 Element Plus中的數(shù)據(jù) 227
12.1 數(shù)據(jù)展示類組件 227
12.1.1 表格組件 227
12.1.2 標(biāo)簽組件 229
12.1.3 進(jìn)度條組件 230
12.1.4 樹形組件 231
12.1.5 分頁組件 234
12.1.6 徽章組件 236
12.1.7 描述列表組件 237
12.1.8 結(jié)果組件 239
12.2 導(dǎo)航類組件 241
12.2.1 導(dǎo)航菜單組件 241
12.2.2 標(biāo)簽頁組件 243
12.2.3 面包屑組件 244
12.2.4 頁頭組件 245
12.2.5 下拉菜單組件 245
12.2.6 步驟條組件 247
12.3 其他高級組件 248
12.3.1 對話框組件 248
12.3.2 提示組件 250
12.3.3 卡片組件 253
12.3.4 走馬燈組件 254
12.3.5 折疊面板組件 255
12.3.6 時(shí)間線組件 256
12.3.7 分割線組件 258
12.3.8 抽屜組件 258
12.4 綜合案例——設(shè)計(jì)一個(gè)商品列表管理后臺頁面 259
第13章 項(xiàng)目實(shí)戰(zhàn)1——開發(fā)科技企業(yè)網(wǎng)站系統(tǒng) 266
13.1 使用Vite搭建項(xiàng)目 266
13.2 設(shè) 計(jì) 首 頁 269
13.2.1 網(wǎng)頁頭部組件 269
13.2.2 網(wǎng)頁首頁組件 271
13.2.3 網(wǎng)頁頁腳組件 272
13.3 設(shè)計(jì)主營業(yè)務(wù)組件 273
13.4 設(shè)計(jì)關(guān)于我們組件 275
13.5 設(shè)計(jì)企業(yè)新聞組件 276
13.6 設(shè)計(jì)聯(lián)系我們組件 277
13.7 路由配置 278
13.8 系統(tǒng)的運(yùn)行 279
13.9 系統(tǒng)的調(diào)試 280
第14章 項(xiàng)目實(shí)戰(zhàn)2——開發(fā)圖書管理系統(tǒng) 283
14.1 項(xiàng)目環(huán)境及框架 283
14.1.1 系統(tǒng)開發(fā)環(huán)境要求 283
14.1.2 軟件框架 283
14.2 系統(tǒng)分析 284
14.2.1 系統(tǒng)功能設(shè)計(jì) 284
14.2.2 系統(tǒng)功能結(jié)構(gòu)圖 285
14.3 系統(tǒng)主要功能實(shí)現(xiàn) 285
14.3.1 登錄頁面的實(shí)現(xiàn) 285
14.3.2 注冊頁面的實(shí)現(xiàn) 287
14.3.3 首頁的實(shí)現(xiàn) 287
14.3.4 個(gè)人中心頁面的實(shí)現(xiàn) 292
14.3.5 書籍管理頁面的實(shí)現(xiàn) 295
14.3.6 用戶管理頁面的實(shí)現(xiàn) 299
第15章 項(xiàng)目實(shí)戰(zhàn)3——開發(fā)企業(yè)辦公自動(dòng)化系統(tǒng) 300
15.1 項(xiàng)目環(huán)境及框架 300
15.1.1 系統(tǒng)開發(fā)環(huán)境要求 300
15.1.2 軟件框架 300
15.2 系統(tǒng)分析 301
15.2.1 系統(tǒng)功能設(shè)計(jì) 301
15.2.2 系統(tǒng)功能結(jié)構(gòu)圖 301
15.3 系統(tǒng)主要功能實(shí)現(xiàn) 302
15.3.1 登錄頁面的實(shí)現(xiàn) 302
15.3.2 概況頁面的實(shí)現(xiàn) 303
15.3.3 員工信息頁面的實(shí)現(xiàn) 307
15.3.4 招聘崗位頁面的實(shí)現(xiàn) 309
15.3.5 應(yīng)聘者信息頁面的實(shí)現(xiàn) 310
15.3.6 考勤信息頁面的實(shí)現(xiàn) 310
15.3.7 簽到信息頁面的實(shí)現(xiàn) 310
展開全部
Vue.js 3.x+Element Plus從入門到項(xiàng)目實(shí)踐 作者簡介
孫建召,一線軟件工程師,比較擅長Android、Vue.js、React,有豐富的專業(yè)知識和開發(fā)經(jīng)驗(yàn),曾負(fù)責(zé)并上線多個(gè)大型Web項(xiàng)目。多年來一直致力于分享實(shí)踐經(jīng)驗(yàn),擁有粉絲10萬余。