循序漸進 Vue.js 3.x 前端開發實戰

《循序漸進Vue.js 3.x前端開發實戰》以一個多年前端“老司機”的視角，循序漸進地介紹流行前端框架Vue.js 3.x全家桶與周邊工具在商業項目開發中的應用。全書共15章，第1~6章介紹Vue.js 3的模板、組件、交互處理等基礎知識；第7章介紹Vue.js 3框架的響應式編程及組合式API；第8章介紹使用Vue.js 3框架開發前端動畫效果；第9章介紹開發大型項目必備的腳手架工具Vue CLI和Vite；第10章介紹基於Vue.js 3的UI組件庫Element Plus；第11~13章分別介紹網絡請求框架vue-axios、路由管理框架Vue Router、狀態管理框架Vuex；第14章和第15章介紹兩個項目的開發棗學習筆記網站和電商後台管理系統。同時，還精心設計了實踐和練習，錄制了45集教學視頻，提供了完整源代碼。 《循序漸進Vue.js 3.x前端開發實戰》通俗易懂，範例豐富，原理與實踐並重，適合Vue.js初學者和前端開發人員使用，也可以作為網課、培訓機構與大中專院校的教學用書。

目    錄

第1章　從前端基礎到Vue.js 31

1.1  前端技術演進1

1.2  HTML入門2

1.2.1  準備開發工具3

1.2.2  HTML中的基礎標簽5

1.3  CSS入門7

1.3.1  CSS選擇器入門8

1.3.2  CSS樣式入門10

1.4  JavaScript入門13

1.4.1  為什麽需要JavaScript13

1.4.2  JavaScript語法簡介15

1.5  漸進式開發框架Vue17

1.5.1  第一個Vue應用17

1.5.2  範例演練：實現一個簡單的用戶登錄頁面19

1.5.3  Vue 3的新特性21

1.5.4  為什麽要使用Vue框架22

1.6  小結與練習23

第2章　Vue模板應用24

2.1  模板基礎24

2.1.1  模板插值25

2.1.2  模板指令28

2.2  條件渲染29

2.2.1  使用v-if指令進行條件渲染30

2.2.2  使用v-show指令進行條件渲染32

2.3  循環渲染33

2.3.1  v-for指令的使用方法33

2.3.2  v-for指令的高級用法36

2.4  範例演練：實現待辦任務列表應用38

2.4.1  步驟一：使用HTML搭建應用框架結構38

2.4.2  步驟二：實現待辦任務列表的邏輯開發39

2.5  小結與練習40

第3章　Vue組件的屬性和方法41

3.1  屬性與方法基礎41

3.1.1  屬性基礎42

3.1.2  方法基礎42

3.2  計算屬性和偵聽器43

3.2.1  計算屬性43

3.2.2  使用計算屬性還是函數44

3.2.3  計算屬性的賦值45

3.2.4  屬性偵聽器46

3.3  進行函數限流48

3.3.1  手動實現一個簡易的限流函數48

3.3.2  使用Lodash庫進行函數限流50

3.4  表單數據的雙向綁定50

3.4.1  文本輸入框50

3.4.2  多行文本輸入區域51

3.4.3  復選框與單選框52

3.4.4  選擇列表53

3.4.5  兩個常用的修飾符53

3.5  樣式綁定54

3.5.1  為HTML標簽綁定class屬性54

3.5.2  綁定內聯樣式56

3.6  範例演練：實現一個功能完整的用戶註冊頁面57

3.6.1  步驟一：搭建用戶註冊頁面57

3.6.2  步驟二：實現註冊頁面的用戶交互60

3.7  小結與練習62

第4章　處理用戶交互63

4.1  事件的監聽與處理63

4.1.1  事件監聽示例63

4.1.2  多事件處理65

4.1.3  事件修飾符66

4.2  Vue中的事件類型68

4.2.1  常用事件類型68

4.2.2  按鍵修飾符70

4.3  範例演練：隨鼠標移動的小球72

4.4  範例演練：彈球游戲74

4.5  小結與練習77

第5章　組件基礎79

5.1  Vue應用與組件79

5.1.1  Vue應用的數據配置選項79

5.1.2  定義組件81

5.2  組件中數據與事件的傳遞82

5.2.1  為組件添加外部屬性83

5.2.2  處理組件事件84

5.2.3  在組件上使用v-model指令85

5.3  自定義組件的插槽88

5.3.1  組件插槽的基本用法88

5.3.2  多具名插槽的用法90

5.4  動態組件的簡單應用91

5.5  範例演練：開發一款小巧的開關按鈕組件93

5.6  小結與練習95

第6章　組件進階97

6.1  組件的生命周期與高級配置97

6.1.1  生命周期方法98

6.1.2  應用的全局配置選項101

6.1.3  組件的註冊方式102

6.2  組件props屬性的高級用法103

6.2.1  對props屬性進行驗證103

6.2.2  props的只讀性質106

6.2.3  組件數據註入107

6.3  組件Mixin技術110

6.3.1  使用Mixin來定義組件110

6.3.2  Mixin選項的合並112

6.3.3  進行全局Mixin113

6.4  使用自定義指令114

6.4.1  認識自定義指令114

6.4.2  自定義指令的參數115

6.5  組件的Teleport功能116

6.6  小結與練習118

第7章　Vue響應式編程119

7.1  響應式編程的原理與在Vue中的應用119

7.1.1  手動追蹤變量的變化119

7.1.2  Vue中的響應式對象122

7.1.3  獨立的響應式值Ref的應用124

7.2  響應式的計算與監聽126

7.2.1  關於計算變量126

7.2.2  監聽響應式變量128

7.3  組合式API的應用130

7.3.1  關於setup方法130

7.3.2  在setup方法中定義生命周期行為132

7.4  範例演練：實現支持搜索和篩選的用戶列表133

7.4.1  常規風格的示例工程開發133

7.4.2  使用組合式API重構用戶列表頁面136

7.5  小結與練習139

第8章　動畫140

8.1  使用CSS3創建動畫140

8.1.1  transition過渡動畫140

8.1.2  keyframes動畫142

8.2  使用JavaScript的方式實現動畫效果144

8.3  Vue過渡動畫145

8.3.1  定義過渡動畫145

8.3.2  設置動畫過程中的監聽回調149

8.3.3  多個組件的過渡動畫150

8.3.4  列表過渡動畫152

8.4  範例演練：優化用戶列表頁面154

8.5  小結與練習155

第9章　Vue CLI工具的使用156

9.1  Vue CLI工具入門156

9.1.1  Vue CLI工具的安裝156

9.1.2  快速創建項目158

9.2  Vue CLI項目模板工程160

9.2.1  模板工程的目錄結構160

9.2.2  運行Vue項目工程164

9.3  在項目中使用依賴165

9.4  工程構建167

9.5  新一代前端構建工具Vite168

9.5.1  Vite與Vue CLI168

9.5.2  體驗Vite構建工具169

9.6  小結與練習170

第10章　Element Plus 基於Vue 3的UI組件庫171

10.1  Element Plus入門171

10.1.1  Element Plus的安裝與使用172

10.1.2  按鈕組件174

10.1.3  標簽組件177

10.1.4  空態圖與加載占位圖組件179

10.1.5  圖片與頭像組件183

10.2  表單類組件184

10.2.1  單選框與多選框184

10.2.2  標準輸入框組件186

10.2.3  帶推薦列表的輸入框組件188

10.2.4  數字輸入框190

10.2.5  選擇列表191

10.2.6  多級列表組件194

10.3  開關與滑塊組件196

10.3.1  開關組件196

10.3.2  滑塊組件197

10.4  選擇器組件199

10.4.1  時間選擇器199

10.4.2  日期選擇器201

10.4.3  顏色選擇器202

10.5  提示類組件203

10.5.1  警告組件203

10.5.2  消息提示204

10.5.3  通知組件205

10.6  數據承載相關組件206

10.6.1  表格組件206

10.6.2  導航菜單組件209

10.6.3  標簽頁組件211

10.6.4  抽屜組件212

10.6.5  佈局容器組件213

10.7  實戰：教務系統學生表214

10.8  小結與練習218

第11章　基於Vue的網絡框架vue-axios的應用219

11.1  使用vue-axios請求天氣數據219

11.1.1  使用互聯網上免費的數據服務219

11.1.2  使用vue-axios進行數據請求221

11.2  vue-axios實用功能介紹224

11.2.1  通過配置的方式進行數據請求224

11.2.2  請求的配置與響應數據結構225

11.2.3  攔截器的使用226

11.3  範例演練：天氣預報應用227

11.3.1  搭建頁面框架227

11.3.2  實現天氣預報應用的核心邏輯230

11.4  小結與練習231

第12章　Vue路由管理232

12.1  Vue Router的安裝與簡單使用232

12.1.1  Vue Router的安裝233

12.1.2  一個簡單的Vue Router的使用示例233

12.2  帶參數的動態路由235

12.2.1  路由參數匹配235

12.2.2  路由匹配的語法規則237

12.2.3  路由的嵌套239

12.3  頁面導航240

12.3.1  使用路由方法240

12.3.2  導航歷史控制242

12.4  關於路由的命名242

12.4.1  使用名稱進行路由切換243

12.4.2  路由視圖命名243

12.4.3  使用別名244

12.4.4  路由重定向245

12.5  關於路由傳參246

12.6  路由導航守衛247

12.6.1  定義全局的導航守衛247

12.6.2  為特定的路由註冊導航守衛248

12.7  動態路由250

12.8  小結與練習252

第13章　Vue狀態管理253

13.1  認識Vuex框架253

13.1.1  關於狀態管理253

13.1.2  安裝與體驗Vuex255

13.2  Vuex中的一些核心概念258

13.2.1  Vuex中的狀態state258

13.2.2  Vuex中的Getter方法259

13.2.3  Vuex中的Mutation261

13.2.4  Vuex中的Action262

13.2.5  Vuex中的Module263

13.3  小結與練習266

第14章　實戰項目：開發一個學習筆記網站267

14.1  網站框架的搭建267

14.2  配置專題與文章目錄272

14.3  渲染文章筆記內容275

14.4  小結與練習279

第15章　實戰項目：電商後台管理系統實戰280

15.1  用戶登錄模塊開發280

15.1.1  項目搭建280

15.1.2  用戶登錄頁面開發283

15.2  項目主頁搭建286

15.2.1  主頁框架搭建286

15.2.2  完善註銷功能289

15.3  訂單管理模塊開發290

15.3.1  使用Mock.js進行模擬數據的生成290

15.3.2  編寫工具類與全局樣式291

15.3.3  完善訂單管理頁面292

15.4  商品管理模塊的開發298

15.4.1  商品管理列表頁的開發298

15.4.2  新增商品之基礎配置303

15.4.3  新增商品之價格和庫存配置306

15.4.4  新增商品之詳情設置309

15.4.5  添加商品分類311

15.5  店長管理模塊的開發313

15.5.1  店長列表開發313

15.5.2  店長審批列表與店長訂單316

15.6  財務管理與數據統計功能模塊開發317

15.6.1  交易明細與財務對賬單318

15.6.2  數據統計模塊開發319

15.7  小結與練習323