Vue.js 3 開發詳解

本書循序漸進地介紹當前流行的前端框架Vue.js 3的基礎知識、新特性、各項功能及其在商業開發中的應用。全書共12章，第1~6章介紹Vue.js 3的語言基礎，搭建開發環境，Vue.js 3的基本使用、指令和組件等基礎知識；第7章介紹Vue.js 3框架的腳手架工程vue-cil的開發；第8章介紹使用Vue.js 3的路由；第9章介紹組合式API；第10章介紹基於Vue.js 3的UI框架Element Plus；第11章介紹網絡請求框架Axios；第12章介紹狀態管理框架Vuex和一個相對完整的案例。本書試圖介紹Vue.js 3全家桶及周邊框架和工具的綜合應用，旨在使讀者通過閱讀本書開發自己的應用程序。本書的內容前後呼應，環環相扣，使得讀者的學習曲線非常平緩，適合自學。 本書既適合Vue.js 3初學者和前端開發人員使用，也可以作為培訓機構與大中專院校的教學用書。

目    錄

 

第1章  Vue.js概述 1

1.1  HTTP與HTML 1

1.1.1  TCP通信傳輸流 1

1.1.2  HTTP 2

1.1.3  HTML 4

1.2  Web後端基礎技術 4

1.2.1  Spring 4

1.2.2  Spring Security 6

1.2.3  OAuth 2.0 8

1.2.4  JWT 8

1.2.5  JPA 9

1.2.6  MySQL 10

1.3  Web部署技術 10

1.3.1  Docker 11

1.3.2  Docker Swarm Service 11

1.3.3  Nginx + OpenResty 13

1.4  框架 14

1.4.1  為什麽要使用框架 14

1.4.2  Web框架基礎技術 14

1.4.3  分清框架和庫 14

1.4.4  Web開發框架技術 15

1.5  Web前端框架 15

1.5.1  MVC框架模式 16

1.5.2  MVP框架模式 16

1.5.3  MVVM框架模式 17

1.5.4  前端框架的發展現狀 18

1.6  前端主流框架 19

1.6.1  Angular.js框架 19

1.6.2  React.js框架 20

1.6.3  Vue.js框架 20

1.6.4  Bootstrap框架 21

1.7  後端主流框架 21

1.7.1  Laravel框架 22

1.7.2  Spring Boot框架 22

1.7.3  Django框架 23

1.8  渲染引擎及網頁渲染 23

1.8.1  JavaScript引擎 24

1.8.2  Chrome V8引擎 25

1.9  Vue.js的基本概念 25

1.10  Vue.js的優缺點 26

第2章  Vue.js 3的語言基礎 28

2.1  從JavaScript標準說起 28

2.1.1  ECMAScript概述 29

2.1.2  ECMAScript和JavaScript的關系 29

2.1.3  ES 6為何重要 29

2.2  調試一個JavaScript程序 30

2.3  說說JavaScript運行時 34

2.3.1  Node.js概述 34

2.3.2  安裝Node.js 35

2.3.3  Node.js的軟件包管理器 36

2.3.4  包管理器cnpm 39

2.4  為何要學TypeScript 39

2.5  TypeScript基礎 41

2.6  TypeScript的優點 41

2.7  TypeScript的發展歷史 44

2.8  搭建TypeScript開發環境 44

2.8.1  安裝TypeScript編譯器 44

2.8.2  命令行編譯TypeScript程序 45

2.8.3  在VSCode下調試TypeScript程序 46

2.8.4  在VSCode下全速運行TypeScript程序 49

2.9  TypeScript基礎類型 51

2.9.1  常見類型 51

2.9.2  類型斷言 55

2.9.3  類型推斷 56

2.10  TypeScript變量聲明 56

2.10.1  var聲明變量 56

2.10.2  變量作用域 58

2.10.3  var的問題 58

2.10.4  let聲明變量 59

2.10.5  const聲明變量 61

2.11  TypeScript運算符 62

2.11.1  算術運算符 62

2.11.2  關系運算符 63

2.11.3  邏輯運算符 64

2.11.4  位運算符 65

2.11.5  三元運算符 66

2.11.6  類型運算符 67

2.11.7  負號運算符 67

2.11.8  字符串連接運算符 67

2.12  TypeScript條件語句 67

2.12.1  if語句 67

2.12.2  if…else語句 68

2.12.3  if…else if…else語句 68

2.12.4  switch…case語句 69

2.13  TypeScript循環 70

2.13.1  for循環 70

2.13.2  for…in循環 71

2.13.3  for…of循環 71

2.13.4  while循環 71

2.13.5  do…while循環 72

2.13.6  break語句 72

2.13.7  continue語句 73

2.13.8  無限循環 73

2.14  TypeScript函數 73

2.14.1  函數定義 73

2.14.2  調用函數 74

2.14.3  函數返回值 74

2.14.4  帶參數函數 75

2.14.5  可選參數 75

2.14.6  默認參數 76

2.14.7  剩餘參數 76

2.14.8  匿名函數 77

2.14.9  匿名函數自調用 77

2.14.10  遞歸函數 77

2.14.11  箭頭函數 77

2.15  數組 78

2.16  聯合類型 79

2.17  接口 80

2.18  類 81

2.18.1  創建類的數據成員 82

2.18.2  實例化對象 82

2.18.3  類的繼承 83

2.18.4  繼承類的方法重寫 84

2.18.5  static關鍵字 84

2.18.6  instanceof運算符 84

2.18.7  訪問控制修飾符 85

2.18.8  類和接口 85

2.19  命名空間 85

2.20  模塊 87

2.21  TypeScript對象 88

2.22  聲明文件 89

2.23  理解TypeScript配置文件 90

第3章  搭建Vue.js開發環境 96

3.1  使用VSCode開發JavaScript程序 96

3.2  Vue.js的引用方式 98

3.3  第一個Vue.js 3程序 98

第4章  Vue.js基礎入門 101

4.1  創建應用實例並掛載 101

4.2  數據選擇 105

4.3  響應式系統的原理 107

4.3.1  方法選項 110

4.3.2  模板選項 113

4.3.3  生命周期 115

4.4  綁定數據 116

4.4.1  瞭解代碼中的MVVM 116

4.4.2  觸發事件更新View 118

4.4.3  雙向綁定 120

4.5  計算屬性 122

4.5.1  計算屬性的簡單使用 123

4.5.2  計算屬性的get和set 125

4.5.3  計算屬性緩存 126

第5章  指令 130

5.1  v-text和v-html指令 130

5.2  v-model指令 132

5.3  v-on指令 136

5.4  v-for指令 144

5.5  v-if指令 149

5.6  v-else指令 150

5.7  v-show指令 151

5.8  v-bind指令 153

5.9  watch指令 160

第6章  組件應用與進階 161

6.1  組件概述 161

6.2  註冊組件 162

6.2.1  全局註冊組件 162

6.2.2  組件名稱的命名 164

6.2.3  局部註冊 165

6.3  組件之間的關系 166

6.4  組件的復用 168

6.5  組件通信 169

6.5.1  父組件向子組件傳遞數據 169

6.5.2  不要在子組件中修改屬性數據 173

6.5.3  屬性數據的常見應用 174

6.5.4  不同組件在不同JavaScript文件中的實現 176

6.5.5  屬性的默認值 177

6.5.6  props數據類型和驗證 178

第7章  Vue.js腳手架開發 181

7.1  Node.js和Vue.js的關系 181

7.2  配置Webpack環境 182

7.2.1  安裝並使用Webpack 184

7.2.2  package.json文件 187

7.2.3  開發模式和生產模式 188

7.3  Vue.js單文件組件規範 190

7.3.1  基本概念 190

7.3.2  為什麽要使用單文件組件 192

7.3.3  src引入 193

7.3.4  註釋 193

7.3.5  vue-loader 193

7.4  打包實現含Vue.js文件的項目 194

7.5  使用腳手架vue-cli 201

7.5.1  安裝vue-cli 202

7.5.2  使用vue create命令創建項目 203

7.5.3  解析npm run serve 206

7.5.4  vue init創建項目 208

7.5.5  圖形化創建項目 210

7.5.6  使用多個Vue.js文件 213

第8章  路由應用 220

8.1  路由的概念 220

8.2  前端路由與服務端渲染 221

8.3  後端路由 221

8.4  前後端分離 222

8.5  前端路由 222

8.5.1  帶hash的前端路由 223

8.5.2  不帶hash的前端路由 230

8.6  Vue.js的路由 233

8.6.1  在HTML中使用路由 233

8.6.2  在腳手架工程中使用路由 244

8.7  帶參數的動態路由匹配 246

8.7.1  查詢參數 248

8.7.2  捕獲所有路由 250

8.8  路由的匹配語法 250

8.8.1  在參數中自定義正則 250

8.8.2  可重復的參數 251

8.8.3  可選參數 251

8.9  嵌套路由 252

8.10  命名路由 255

8.11  命名視圖 257

8.12  重定向 259

8.13  編程式導航 260

8.13.1  push實現編程式導航 260

8.13.2  replace實現編程式導航 262

8.13.3  橫跨歷史 262

8.14  不同的歷史模式 263

8.15  導航守衛 263

第9章  組合式API 269

9.1  組合式API概述 269

9.2  入口函數setup 271

9.2.1  調用時機與this指向 271

9.2.2  函數參數 272

9.2.3  返回值 274

9.3  響應式函數 276

9.3.1  reactive函數 278

9.3.2  ref函數 280

9.3.3  toRef函數 282

9.3.4  toRefs函數 284

9.4  watch監聽 286

9.4.1  監聽ref定義的響應式數據 287

9.4.2  監聽reactive定義的對象 290

9.5  案例：團購購物車 293

第10章  使用UI框架Element Plus 296

10.1  概述 296

10.2  使用Element Plus的基本步驟 297

10.2.1  CDN方式使用Element Plus 297

10.2.2  離線方式使用Element Plus 298

10.3  按鈕的使用 299

10.4  網址鏈接 302

10.5  單選按鈕 303

10.5.1  基礎用法 303

10.5.2  單選按鈕組 306

10.5.3  按鈕樣式 307

10.6  復選框 308

10.6.1  基礎用法 308

10.6.2  復選框組 310

10.6.3  可選項目數量的限制 311

10.6.4  按鈕樣式 312

10.7  輸入框 313

10.8  InputNumber計數器 314

10.9  選擇器 317

10.10  開關 319

10.11  滑塊 321

10.12  時間拾取器 324

10.13  時間選擇器 326

10.14  日期拾取器 328

10.15  日期時間拾取器 331

10.16  上傳 332

10.17  評分 334

10.18  顏色拾取器 335

10.19  穿梭器 336

10.20  表單 337

10.21  表格 339

10.22  標簽 341

10.23  進度條 343

10.24  樹形 346

10.25  分頁 351

10.26  頭像 354

10.27  描述列表 356

10.28  消息彈框 358

10.28.1  消息提示框 359

10.28.2  消息確認框 359

10.28.3  提交內容框 361

10.29  對話框 362

10.30  圖片 364

10.31  跑馬燈 365

10.32  在腳手架工程中使用Element Plus 367

第11章  Axios和服務器開發 371

11.1  概述 371

11.2  Axios的特點 372

11.3  Express搭建服務端 372

11.4  支持跨域問題 375

11.5  在Vue.js程序中訪問Express服務器數據 376

11.5.1  安裝和導入Axios 376

11.5.2  Axios常用的API函數 376

第12章  Vuex與案例實戰 381

12.1  瞭解“狀態管理模式” 381

12.2  使用Vuex的情形 383

12.3  安裝或引用Vuex 383

12.4  項目實戰 386