《Vue.js 3.x+Element Plus從入門到精通（視頻教學版）》是一本清華大學出版社出版的圖書，作者是張工廠。
基本介紹
- 中文名：Vue.js 3.x+Element Plus從入門到精通（視頻教學版）
- 作者：張工廠
- 出版時間：2024年3月1日
- 出版社：清華大學出版社
- ISBN：9787302653981
- 定價：89 元
內容簡介,作者簡介,圖書目錄,
內容簡介
《Vue.js 3.x+Element Plus從入門到精通：視頻教學版》通過對Vue.js（簡稱Vue）的示例和綜合案例的介紹與演練，使讀者快速掌握Vue.js 3.x框架的用法，提高Web前端的實戰開發能力。本書配套示例源碼、PPT課件、教學大綱、教案、同步教學視頻、習題及答案、其他資源、作者微信群答疑服務。
《Vue.js 3.x+Element Plus從入門到精通：視頻教學版》共分15章，內容包括Vue.js 3.x的基本概念、Vue.js模板套用、組件的方法和計算屬性、表單的雙向綁定、處理用戶互動、精通組件和組合API、虛擬DOM和Render()函式、玩轉動畫效果、熟練使用構建工具Vue CLI和Vite、基於Vue 3的UI組件庫Element Plus、網路通信框架axios、使用Vue Router進行路由管理、狀態管理框架Vuex、基於Vue的網上商城系統實戰，以及基於Element Plus的圖書借閱系統實戰。
《Vue.js 3.x+Element Plus從入門到精通：視頻教學版》內容豐富、注重實踐，對Vue.js框架的初學者而言，是一本簡明易懂的Vue入門書和工具書；對從事Web前端開發的讀者來說，也是一本難得的參考手冊。本書也適合作為高等院校或高職高專前端開發相關課程的教材。
作者簡介
張工廠，鄭州某軟體公司技術副總，技術主攻方向為PHP、MySQL與Web前端技術，在Web套用開發、資料庫管理方面具有豐富的實戰經驗。著有圖書：《PHP 8從入門到精通（視頻教學版）》《MySQL 5.7從入門到精通（視頻教學版）（第2版）》《PHP 7+MySQL 8動態網站開發從入門到精通（視頻教學版）》《HTML5+CSS3+jQuery Mobile+Bootstrap開發APP從入門到精通（視頻教學版）》。
圖書目錄
目 錄
第 1 章 流行的前端開發框架Vue.js 1
1.1 前端開發技術的發展 1
1.2 熟悉MV*模式 2
1.2.1 MVC模式 2
1.2.2 MVVM模式 2
1.3 Vue.js概述 3
1.3.1 Vue.js“組件化”思想 3
1.3.2 Vue.js的發展歷程 4
1.3.3 Vue.js 3.4的特性 5
1.4 安裝Vue.js 3.x 6
1.4.1 使用CDN方式 6
1.4.2 NPM 6
1.4.3 命令行工具 7
1.4.4 使用Vite方式 7
1.5 案例實戰——使用Vue.js框架 8
1.6 Vue.js 3.x的新變化 9
第 2 章 Vue.js模板套用 12
2.1 模板插值 12
2.1.1 文本插值 12
2.1.2 原始HTML 13
2.1.3 使用JavaScript表達式 14
2.2 常用的內置模板指令 15
2.2.1 v-on 16
2.2.2 v-text 17
2.2.3 v-once 18
2.2.4 v-pre 18
2.2.5 v-cloak 19
2.3 條件渲染 20
2.3.1 v-if/v-else-if/v-else 20
2.3.2 使用v-show指令進行條件渲染 22
2.4 使用v-for指令進行循環渲染 23
2.5 案例實戰1——通過插值語法實現姓名組合 35
2.6 案例實戰2——通過指令實現下拉選單效果 36
第 3 章 組件的方法和計算屬性 39
3.1 方法選項 39
3.1.1 使用方法 39
3.1.2 傳遞參數 41
3.1.3 方法之間的調用 42
3.2 使用計算屬性 43
3.3 計算屬性的get和set方法 44
3.4 計算屬性的快取 46
3.5 使用計算屬性代替v-for和v-if 49
3.6 綁定HTML樣式（class） 51
3.6.1 數組語法 51
3.6.2 對象語法 53
3.6.3 在組件上使用class屬性 56
3.7 綁定內聯樣式（style） 57
3.7.1 對象語法 57
3.7.2 數組語法 59
3.8 案例實戰1——設計隔行變色的商品表 60
3.9 案例實戰2——使用計算屬性設計購物車效果 63
第 4 章 表單的雙向綁定 66
4.1 實現雙向數據綁定 66
4.2 單行文本輸入框 66
4.3 多行文本輸入框 67
4.4 複選框 68
4.5 單選按鈕 70
4.6 選擇框 71
4.7 值綁定 74
4.7.1 複選框 74
4.7.2 單選框 75
4.7.3 選擇框的選項 75
4.8 修飾符 76
4.8.1 lazy 76
4.8.2 number 77
4.8.3 trim 78
4.9 案例實戰——設計用戶註冊頁面 79
第 5 章 處理用戶互動 81
5.1 監聽事件 81
5.2 事件處理方法 82
5.3 事件修飾符 86
5.3.1 stop 86
5.3.2 capture 88
5.3.3 self 90
5.3.4 once 92
5.3.5 prevent 93
5.3.6 passive 94
5.4 按鍵修飾符 94
5.5 系統修飾鍵 96
5.6 使用監聽器 97
5.7 監聽方法 99
5.8 監聽對象 100
5.9 案例實戰1——使用監聽器設計購物車效果 103
5.10 案例實戰2——處理用戶註冊信息 105
第 6 章 精通組件和組合API 107
6.1 組件是什麼 107
6.2 組件的註冊 107
6.2.1 全局註冊 108
6.2.2 局部註冊 109
6.3 使用prop向子組件傳遞數據 110
6.3.1 prop的基本用法 110
6.3.2 單向數據流 113
6.3.3 prop驗證 114
6.3.4 非prop的屬性 116
6.4 子組件向父組件傳遞數據 117
6.4.1 監聽子組件事件 118
6.4.2 將原生事件綁定到組件 119
6.4.3 .sync修飾符 121
6.5 插槽 123
6.5.1 插槽的基本用法 123
6.5.2 編譯作用域 123
6.5.3 默認內容 124
6.5.4 命名插槽 125
6.5.5 作用域插槽 128
6.5.6 解構插槽prop 130
6.6 Vue.js 3.x的新變化1——組合API 131
6.7 setup()函式 131
6.8 回響式API 133
6.8.1 reactive()方法和watchEffect()方法 133
6.8.2 ref()方法 134
6.8.3 readonly()方法 135
6.8.4 computed()方法 135
6.8.5 watch()方法 136
6.9 Vue.js 3.x的新變化2——訪問組件的方式 137
6.10 案例實戰——使用組件創建樹狀項目分類 138
第 7 章 虛擬DOM和render()函式 140
7.1 虛擬DOM 140
7.2 render()函式 141
7.3 創建組件的VNode 144
7.4 使用JavaScript代替模板功能 145
7.4.1 v-if和v-for 145
7.4.2 v-on 146
7.4.3 事件和按鍵修飾符 146
7.4.4 插槽 147
7.5 函式式組件 149
7.6 JSX 149
7.7 案例實戰——設計商品採購信息列表 150
第 8 章 玩轉動畫效果 153
8.1 單元素/組件的過渡 153
8.1.1 CSS過渡 153
8.1.2 過渡的類名 155
8.1.3 CSS動畫 158
8.1.4 自定義過渡的類名 159
8.1.5 動畫的JavaScript鉤子函式 160
8.2 初始渲染的過渡 164
8.3 多個元素的過渡 165
8.4 列表過渡 166
8.4.1 列表的進入/離開過渡 167
8.4.2 列表的排序過渡 168
8.4.3 列表的交錯過渡 169
8.5 案例實戰1——商品編號增加器 171
8.6 案例實戰2——設計下拉選單的過渡動畫 173
第 9 章 熟練使用構建工具Vue CLI和Vite 175
9.1 腳手架的組件 175
9.2 腳手架環境搭建 176
9.3 安裝腳手架 179
9.4 創建項目 180
9.4.1 使用命令 180
9.4.2 使用圖形化界面 182
9.5 分析項目結構 186
9.6 配置Sass、Less和Stylus 188
9.7 配置檔案package.json 190
9.8 Vue.js 3.x新增開發構建工具——Vite 191
第 10 章 基於Vue 3的UI組件庫Element Plus 194
10.1 Element Plus的安裝與使用 194
10.2 基本組件 196
10.2.1 按鈕組件 196
10.2.2 文字連結組件 198
10.2.3 間距組件 198
10.3 頁面布局 201
10.3.1 創建頁面基礎布局 201
10.3.2 布局容器 203
10.4 表單類組件 205
10.4.1 單選框 205
10.4.2 複選框 206
10.4.3 標準輸入框組件 208
10.4.4 帶推薦列表的輸入框組件 210
10.4.5 數字輸入框 212
10.4.6 選擇列表 213
10.4.7 多級列表組件 216
10.5 開關與滑塊組件 218
10.5.1 開關組件 218
10.5.2 滑塊組件 219
10.6 選擇器組件 221
10.6.1 時間選擇器 221
10.6.2 日期選擇器 223
10.6.3 顏色選擇器 224
10.7 提示類組件 225
10.7.1 警告組件 225
10.7.2 通知組件 227
10.7.3 訊息提示組件 228
10.8 數據承載相關組件 229
10.8.1 表格組件 229
10.8.2 導航選單組件 232
10.8.3 標籤頁組件 234
10.8.4 標記組件 236
10.8.5 結果組件 237
10.8.6 抽屜組件 238
10.9 案例實戰——設計一個商城活動頁面 240
第 11 章 網路通信框架axios 244
11.1 什麼是axios 244
11.2 安裝axios 244
11.3 基本用法 245
11.3.1 axios的get請求和post請求 245
11.3.2 請求同域下的JSON數據 247
11.3.3 跨域請求數據 249
11.3.4 並發請求 250
11.4 axios API 251
11.5 請求配置 251
11.6 創建實例 254
11.7 配置默認選項 254
11.8 攔截器 255
11.9 Vue.js 3.x的新變化——替代Vue.prototype 255
11.10 案例實戰——顯示近7日的天氣情況 256
第 12 章 使用Vue Router進行路由管理 259
12.1 使用Vue Router 259
12.1.1 在HTML頁面使用路由 259
12.1.2 在項目中使用路由 264
12.2 命名路由 266
12.3 命名視圖 268
12.4 路由傳參 272
12.5 編程式導航 277
12.6 組件與Vue Router間解耦 281
12.6.1 布爾模式 281
12.6.2 對象模式 284
12.6.3 函式模式 287
12.7 案例實戰——開發網站會員登錄頁面 290
第 13 章 狀態管理框架Vuex 295
13.1 什麼是Vuex 295
13.2 安裝Vuex 296
13.3 在項目中使用Vuex 297
13.3.1 搭建一個項目 297
13.3.2 state對象 299
13.3.3 getter對象 300
13.3.4 mutation對象 302
13.3.5 action對象 304
13.4 案例實戰——設計一個商城購物車頁面 306
第 14 章 基於Vue的網上商城系統開發 313
14.1 系統功能模組 313
14.2 使用Vite搭建項目 313
14.3 設計首頁 314
14.3.1 頁面頭部組件 314
14.3.2 網頁首頁組件 315
14.3.3 網頁頁腳組件 320
14.4 設計商品詳情頁面 320
14.5 設計商品分類頁面 322
14.6 設計商品結算頁面 325
14.7 設計個人信息頁面 328
14.8 設計訂單信息頁面 331
14.9 路由配置 334
14.10 系統的運行 335
第 15 章 基於Element Plus的圖書借閱系統開發 336
15.1 使用Vite搭建項目 336
15.2 設計登錄頁面 338
15.3 設計註冊頁面 340
15.4 設計首頁 341
15.5 設計會員信息頁面 344
15.6 設計圖書借閱信息頁面 349
15.7 設計還書信息頁面 351
15.8 系統的運行 353
15.9 系統的調試 353
