Vue.js 3開發(fā)詳解

第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后端基礎(chǔ)技術(shù) 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部署技術(shù) 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框架基礎(chǔ)技術(shù) 14
1.4.3  分清框架和庫 14
1.4.4  Web開發(fā)框架技術(shù) 15
1.5  Web前端框架 15
1.5.1  MVC框架模式 16
1.5.2  MVP框架模式 16
1.5.3  MVVM框架模式 17
1.5.4  前端框架的發(fā)展現(xiàn)狀 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  渲染引擎及網(wǎng)頁渲染 23
1.8.1  JavaScript引擎 24
1.8.2  Chrome V8引擎 25
1.9  Vue.js的基本概念 25
1.10  Vue.js的優(yōu)缺點(diǎn) 26
第2章  Vue.js 3的語言基礎(chǔ) 28
2.1  從JavaScript標(biāo)準(zhǔn)說起 28
2.1.1  ECMAScript概述 29
2.1.2  ECMAScript和JavaScript的關(guān)系 29
2.1.3  ES 6為何重要 29
2.2  調(diào)試一個(gè)JavaScript程序 30
2.3  說說JavaScript運(yùn)行時(shí) 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  為何要學(xué)TypeScript 39
2.5  TypeScript基礎(chǔ) 41
2.6  TypeScript的優(yōu)點(diǎn) 41
2.7  TypeScript的發(fā)展歷史 44
2.8  搭建TypeScript開發(fā)環(huán)境 44
2.8.1  安裝TypeScript編譯器 44
2.8.2  命令行編譯TypeScript程序 45
2.8.3  在VSCode下調(diào)試TypeScript程序 46
2.8.4  在VSCode下全速運(yùn)行TypeScript程序 49
2.9  TypeScript基礎(chǔ)類型 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運(yùn)算符 62
2.11.1  算術(shù)運(yùn)算符 62
2.11.2  關(guān)系運(yùn)算符 63
2.11.3  邏輯運(yùn)算符 64
2.11.4  位運(yùn)算符 65
2.11.5  三元運(yùn)算符 66
2.11.6  類型運(yùn)算符 67
2.11.7  負(fù)號(hào)運(yùn)算符 67
2.11.8  字符串連接運(yùn)算符 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循環(huán) 70
2.13.1  for循環(huán) 70
2.13.2  for…in循環(huán) 71
2.13.3  for…of循環(huán) 71
2.13.4  while循環(huán) 71
2.13.5  do…while循環(huán) 72
2.13.6  break語句 72
2.13.7  continue語句 73
2.13.8  無限循環(huán) 73
2.14  TypeScript函數(shù) 73
2.14.1  函數(shù)定義 73
2.14.2  調(diào)用函數(shù) 74
2.14.3  函數(shù)返回值 74
2.14.4  帶參數(shù)函數(shù) 75
2.14.5  可選參數(shù) 75
2.14.6  默認(rèn)參數(shù) 76
2.14.7  剩余參數(shù) 76
2.14.8  匿名函數(shù) 77
2.14.9  匿名函數(shù)自調(diào)用 77
2.14.10  遞歸函數(shù) 77
2.14.11  箭頭函數(shù) 77
2.15  數(shù)組 78
2.16  聯(lián)合類型 79
2.17  接口 80
2.18  類 81
2.18.1  創(chuàng)建類的數(shù)據(jù)成員 82
2.18.2  實(shí)例化對(duì)象 82
2.18.3  類的繼承 83
2.18.4  繼承類的方法重寫 84
2.18.5  static關(guān)鍵字 84
2.18.6  instanceof運(yùn)算符 84
2.18.7  訪問控制修飾符 85
2.18.8  類和接口 85
2.19  命名空間 85
2.20  模塊 87
2.21  TypeScript對(duì)象 88
2.22  聲明文件 89
2.23  理解TypeScript配置文件 90
第3章  搭建Vue.js開發(fā)環(huán)境 96
3.1  使用VSCode開發(fā)JavaScript程序 96
3.2  Vue.js的引用方式 98
3.3  個(gè)Vue.js 3程序 98
第4章  Vue.js基礎(chǔ)入門 101
4.1  創(chuàng)建應(yīng)用實(shí)例并掛載 101
4.2  數(shù)據(jù)選擇 105
4.3  響應(yīng)式系統(tǒng)的原理 107
4.3.1  方法選項(xiàng) 110
4.3.2  模板選項(xiàng) 113
4.3.3  生命周期 115
4.4  綁定數(shù)據(jù) 116
4.4.1  了解代碼中的MVVM 116
4.4.2  觸發(fā)事件更新View 118
4.4.3  雙向綁定 120
4.5  計(jì)算屬性 122
4.5.1  計(jì)算屬性的簡(jiǎn)單使用 123
4.5.2  計(jì)算屬性的get和set 125
4.5.3  計(jì)算屬性緩存 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章  組件應(yīng)用與進(jìn)階 161
6.1  組件概述 161
6.2  注冊(cè)組件 162
6.2.1  全局注冊(cè)組件 162
6.2.2  組件名稱的命名 164
6.2.3  局部注冊(cè) 165
6.3  組件之間的關(guān)系 166
6.4  組件的復(fù)用 168
6.5  組件通信 169
6.5.1  父組件向子組件傳遞數(shù)據(jù) 169
6.5.2  不要在子組件中修改屬性數(shù)據(jù) 173
6.5.3  屬性數(shù)據(jù)的常見應(yīng)用 174
6.5.4  不同組件在不同JavaScript文件中的實(shí)現(xiàn) 176
6.5.5  屬性的默認(rèn)值 177
6.5.6  props數(shù)據(jù)類型和驗(yàn)證 178
第7章  Vue.js腳手架開發(fā) 181
7.1  Node.js和Vue.js的關(guān)系 181
7.2  配置Webpack環(huán)境 182
7.2.1  安裝并使用Webpack 184
7.2.2  package.json文件 187
7.2.3  開發(fā)模式和生產(chǎn)模式 188
7.3  Vue.js單文件組件規(guī)范 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  打包實(shí)現(xiàn)含Vue.js文件的項(xiàng)目 194
7.5  使用腳手架vue-cli 201
7.5.1  安裝vue-cli 202
7.5.2  使用vue create命令創(chuàng)建項(xiàng)目 203
7.5.3  解析npm run serve 206
7.5.4  vue init創(chuàng)建項(xiàng)目 208
7.5.5  圖形化創(chuàng)建項(xiàng)目 210
7.5.6  使用多個(gè)Vue.js文件 213
第8章  路由應(yīng)用 220
8.1  路由的概念 220
8.2  前端路由與服務(wù)端渲染 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  帶參數(shù)的動(dòng)態(tài)路由匹配 246
8.7.1  查詢參數(shù) 248
8.7.2  捕獲所有路由 250
8.8  路由的匹配語法 250
8.8.1  在參數(shù)中自定義正則 250
8.8.2  可重復(fù)的參數(shù) 251
8.8.3  可選參數(shù) 251
8.9  嵌套路由 252
8.10  命名路由 255
8.11  命名視圖 257
8.12  重定向 259
8.13  編程式導(dǎo)航 260
8.13.1  push實(shí)現(xiàn)編程式導(dǎo)航 260
8.13.2  replace實(shí)現(xiàn)編程式導(dǎo)航 262
8.13.3  橫跨歷史 262
8.14  不同的歷史模式 263
8.15  導(dǎo)航守衛(wèi) 263
第9章  組合式API 269
9.1  組合式API概述 269
9.2  入口函數(shù)setup 271
9.2.1  調(diào)用時(shí)機(jī)與this指向 271
9.2.2  函數(shù)參數(shù) 272
9.2.3  返回值 274
9.3  響應(yīng)式函數(shù) 276
9.3.1  reactive函數(shù) 278
9.3.2  ref函數(shù) 280
9.3.3  toRef函數(shù) 282
9.3.4  toRefs函數(shù) 284
9.4  watch監(jiān)聽 286
9.4.1  監(jiān)聽ref定義的響應(yīng)式數(shù)據(jù) 287
9.4.2  監(jiān)聽reactive定義的對(duì)象 290
9.5  案例：團(tuán)購(gòu)購(gòu)物車 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  網(wǎng)址鏈接 302
10.5  單選按鈕 303
10.5.1  基礎(chǔ)用法 303
10.5.2  單選按鈕組 306
10.5.3  按鈕樣式 307
10.6  復(fù)選框 308
10.6.1  基礎(chǔ)用法 308
10.6.2  復(fù)選框組 310
10.6.3  可選項(xiàng)目數(shù)量的限制 311
10.6.4  按鈕樣式 312
10.7  輸入框 313
10.8  InputNumber計(jì)數(shù)器 314
10.9  選擇器 317
10.10  開關(guān) 319
10.11  滑塊 321
10.12  時(shí)間拾取器 324
10.13  時(shí)間選擇器 326
10.14  日期拾取器 328
10.15  日期時(shí)間拾取器 331
10.16  上傳 332
10.17  評(píng)分 334
10.18  顏色拾取器 335
10.19  穿梭器 336
10.20  表單 337
10.21  表格 339
10.22  標(biāo)簽 341
10.23  進(jìn)度條 343
10.24  樹形 346
10.25  分頁 351
10.26  頭像 354
10.27  描述列表 356
10.28  消息彈框 358
10.28.1  消息提示框 359
10.28.2  消息確認(rèn)框 359
10.28.3  提交內(nèi)容框 361
10.29  對(duì)話框 362
10.30  圖片 364
10.31  跑馬燈 365
10.32  在腳手架工程中使用Element Plus 367
第11章  Axios和服務(wù)器開發(fā) 371
11.1  概述 371
11.2  Axios的特點(diǎn) 372
11.3  Express搭建服務(wù)端 372
11.4  支持跨域問題 375
11.5  在Vue.js程序中訪問Express服務(wù)器數(shù)據(jù) 376
11.5.1  安裝和導(dǎo)入Axios 376
11.5.2  Axios常用的API函數(shù) 376
第12章  Vuex與案例實(shí)戰(zhàn) 381
12.1  了解“狀態(tài)管理模式” 381
12.2  使用Vuex的情形 383
12.3  安裝或引用Vuex 383
12.4  項(xiàng)目實(shí)戰(zhàn) 386