Vue.js 3+TypeScript完全指南

1 邂逅和初體驗Vue.js 1
1.1 認識Vue.js 1
1.2 Vue.js與其他框架的對比 2
1.2.1 Vue.js、React和Angular三大框架對比 2
1.2.2 三大框架使用數(shù)據(jù)對比 2
1.3 Vue.js 2的缺點 4
1.4 Vue.js 3帶來的新變化 4
1.5 搭建開發(fā)環(huán)境 6
1.5.1 VS Code的下載和安裝 7
1.5.2 VS Code的基本配置 7
1.5.3 VS Code安裝插件 9
1.6 Vue.js 3的安裝和使用 10
1.6.1 使用CDN引入Vue.js 3 11
1.6.2 下載Vue.js 3源碼并在本地引入 14
1.7 計數(shù)器案例 16
1.7.1 原生JavaScript實現(xiàn)計數(shù)器 16
1.7.2 用Vue.js 3實現(xiàn)計數(shù)器 17
1.7.3 MVVM架構(gòu)模式 19
1.8 createApp的對象參數(shù) 20
1.8.1 template屬性 20
1.8.2 data屬性 22
1.8.3 methods屬性 22
1.8.4 其他屬性 24
1.9 VS Code生成代碼片段 24
1.10 本章小結(jié) 27
2 模板語法和內(nèi)置指令 28
2.1 插值語法 28
2.2 基本指令 30
2.2.1 v-once 30
2.2.2 v-text 31
2.2.3 v-html 32
2.2.4 v-pre 32
2.2.5 v-cloak 33
2.3 v-bind 34
2.3.1 綁定基本屬性 34
2.3.2 綁定class屬性 35
2.3.3 綁定style屬性 38
2.3.4 動態(tài)綁定屬性 40
2.3.5 綁定一個對象 41
2.4 v-on 42
2.4.1 綁定事件 42
2.4.2 事件對象和傳遞參數(shù) 44
2.4.3 修飾符 45
2.5 條件渲染 46
2.5.1 v-if和v-else 46
2.5.2 v-if和template結(jié)合使用 48
2.5.3 v-show 49
2.5.4 v-show和v-if的區(qū)別 50
2.6 列表渲染 51
2.6.1 v-for的基本使用 51
2.6.2 v-for支持的類型 52
2.6.3 v-for和template結(jié)合使用 54
2.6.4 數(shù)組的更新檢測 55
2.7 key和diff算法 57
2.7.1 認識VNode和VDOM 57
2.7.2 key的作用和diff算法 59
2.7.3 沒有key時的diff算法操作 60
2.7.4 有key時的diff算法操作 61
2.8 本章小結(jié) 64
3 Vue.js 3的Options API 65
3.1 計算屬性 65
3.1.1 認識計算屬性 65
3.1.2 計算屬性的基本使用 66
3.1.3 計算屬性和methods的區(qū)別 69
3.1.4 計算屬性的setter和getter 71
3.2 監(jiān)聽器watch 73
3.2.1 watch的基本使用 73
3.2.2 watch配置選項 75
3.2.3 watch字符串、數(shù)組和API語法 78
3.2.4 watch深度監(jiān)聽 79
3.3 案例：書籍購物車 80
3.3.1 基本功能介紹 80
3.3.2 搭建基本功能 81
3.3.3 搭建書籍列表 83
3.3.4 搭建“加購物車”功能 84
3.3.5 優(yōu)化價格和購買數(shù)量 86
3.3.6 完整代碼展示 86
3.4 本章小結(jié) 88
4 v-model和表單輸入 89
4.1 v-model的基本使用 89
4.2 v-model的實現(xiàn)原理 90
4.3 v-model綁定其他表單 91
4.4 v-model值的綁定 94
4.5 v-model的修飾符 94
4.5.1 .lazy修飾符 94
4.5.2 .number修飾符 94
4.5.3 .trim修飾符 96
4.6 v-model在組件上的使用 96
4.7 本章小結(jié) 96
5 Vue.js 3組件化開發(fā) 97
5.1 認識組件化 97
5.2 Vue.js 3的組件化 98
5.3 Vue.js 3注冊組件 99
5.3.1 注冊全局組件 99
5.3.2 組件的命名規(guī)范 102
5.3.3 注冊局部組件 103
5.4 Vue.js 3開發(fā)模式 105
5.5 Vue.js 3支持SFC 106
5.6 本章小結(jié) 106
6 前端工程化 107
6.1 前端快速發(fā)展史 107
6.2 認識webpack 108
6.3 Vue CLI腳手架 109
6.3.1 認識Vue CLI 109
6.3.2 安裝Node.js 109
6.3.3 安裝Vue CLI 110
6.3.4 Vue CLI新建項目 111
6.3.5 Vue.js 3項目的目錄結(jié)構(gòu) 114
6.3.6 項目的運行和打包 115
6.3.7 vue.config.js文件解析 117
6.4 認識Vite 120
6.5 create-vue 腳手架 121
6.5.1 認識create-vue 121
6.5.2 create-vue新建項目 121
6.5.3 Vue.js 3項目目錄結(jié)構(gòu) 122
6.5.4 項目的運行和打包 123
6.5.5 vite.config.js文件解析 124
6.6 webpack和Vite的區(qū)別 126
6.7 本章小結(jié) 127
7 Vue.js 3組件化基礎(chǔ)詳解 128
7.1 組件的嵌套 130
7.1.1 搭建基本頁面 130
7.1.2 組件的拆分和嵌套 131
7.1.3 組件CSS的作用域 134
7.1.4 組件之間的通信 135
7.2 組件樣式的特性 135
7.2.1 Scoped CSS 135
7.2.2 CSS Modules 138
7.2.3 在CSS中使用v-bind 139
7.3 父子組件的相互通信 140
7.3.1 父組件傳遞數(shù)據(jù)給子組件 140
7.3.2 子組件傳遞數(shù)據(jù)給父組件 146
7.3.3 案例：選項卡TabControl實戰(zhàn) 150
7.4 非父子組件的相互通信 153
7.4.1 Provide/Inject依賴注入 153
7.4.2 全局事件總線 159
7.5 組件中的插槽 162
7.5.1 認識插槽 162
7.5.2 插槽的使用 163
7.6 組件的作用域插槽 169
7.6.1 認識渲染作用域 169
7.6.2 作用域插槽 169
7.6.3 獨占默認插槽 171
7.7 本章小結(jié) 172
8 Vue.js 3組件化進階詳解 173
8.1 動態(tài)組件 173
8.1.1 v-if指令的實現(xiàn) 174
8.1.2 動態(tài)組件的實現(xiàn) 175
8.1.3 動態(tài)組件的傳參 176
8.1.4 keep-alive的使用 177
8.2 異步組件 180
8.2.1 webpack對代碼分包 180
8.2.2 在Vue.js 3中實現(xiàn)異步組件 182
8.2.3 異步組件和Suspense 185
8.3 獲取元素或組件的實例 187
8.3.1 $refs 187
8.3.2 $parent 189
8.4 組件生命周期函數(shù) 190
8.4.1 認識組件的生命周期 190
8.4.2 生命周期函數(shù)的演練 191
8.5 在組件中使用v-model指令 193
8.5.1 v-model的基本使用方法 194
8.5.2 v-model綁定computed 195
8.5.3 組件上應(yīng)用多個v-model 197
8.5.4 v-model綁定對象類型 198
8.6 本章小結(jié) 200
9 Vue.js 3實現(xiàn)過渡動畫 201
9.1 基本過渡動畫 201
9.1.1 認識過渡動畫 201
9.1.2 過渡動畫特有的類 203
9.1.3 CSS的Animation動畫 204
9.1.4 Transition組件的常見屬性 205
9.2 第三方庫動畫庫 210
9.2.1 Animate.css動畫庫 210
9.2.2 GSAP動畫庫 212
9.3 列表中的過渡動畫 216
9.3.1 TransitionGroup的基本使用 217
9.3.2 列表元素的過渡動畫 219
9.3.3 案例：列表元素的交替過渡 220
9.4 本章小結(jié) 222
10 Vue.js 3 Composition API詳解 224
10.1 Options API代碼的復(fù)用 224
10.1.1 Mixin混入 224
10.1.2 extends繼承 228
10.2 認識Composition API 229
10.3 setup函數(shù)的基本使用 230
10.3.1 setup函數(shù)的參數(shù) 231
10.3.2 setup函數(shù)的返回值 233
10.3.3 setup函數(shù)的this 234
10.4 數(shù)據(jù)響應(yīng)式API 235
10.4.1 reactive 235
10.4.2 ref 236
10.5 響應(yīng)式工具reactive 239
10.5.1 readonly 239
10.5.2 isProxy 241
10.5.3 isReactive 241
10.5.4 isReadonly 241
10.5.5 toRaw 242
10.5.6 shallowReactive 242
10.5.7 shallowReadonly 242
10.6 響應(yīng)式工具ref 242
10.6.1 toRefs 242
10.6.2 toRef 244
10.6.3 isRef 245
10.6.4 unref 245
10.6.5 customRef 245
10.6.6 shallowRef 247
10.6.7 triggerRef 247
10.7 computed計算屬性 247
10.7.1 computed函數(shù)的基本使用 247
10.7.2 computed函數(shù)的get和set方法 248
10.8 watchEffect監(jiān)聽 249
10.8.1 watchEffect的基本使用 249
10.8.2 停止watchEffect監(jiān)聽 251
10.8.3 watchEffect清除副作用 251
10.8.4 watchEffect的執(zhí)行時機 252
10.9 watch監(jiān)聽 254
10.9.1 監(jiān)聽單個數(shù)據(jù)源 254
10.9.2 監(jiān)聽多個數(shù)據(jù)源 257
10.9.3 監(jiān)聽響應(yīng)式對象 258
10.10 組件生命周期函數(shù) 259
10.11 Provide/Inject依賴注入 260
10.11.1 提供數(shù)據(jù) 261
10.11.2 注入數(shù)據(jù) 262
10.11.3 提供和注入響應(yīng)式數(shù)據(jù) 263
10.12 案例：Composition API的實戰(zhàn) 264
10.12.1 計數(shù)器的兩種實現(xiàn)方式 264
10.12.2 代碼邏輯的封裝和復(fù)用 266
10.12.3 修改網(wǎng)頁的標題 267
10.12.4 監(jiān)聽頁面滾動位置 268
10.13 ＜script setup＞語法 270
10.13.1 ＜script setup＞的基本使用 270
10.13.2 defineProps和defineEmits 272
10.13.3 defineExpose 273
10.13.4 useSlots和useAttrs 274
10.14 本章小結(jié) 275
11 Vue.js 3組件化高級詳解 276
11.1 render函數(shù) 276
11.1.1 認識h函數(shù) 276
11.1.2 h函數(shù)的基本使用 277
11.1.3 render函數(shù)實現(xiàn)計數(shù)器 278
11.1.4 setup函數(shù)實現(xiàn)計數(shù)器 279
11.1.5 在render函數(shù)中實現(xiàn)插槽 279
11.1.6 組件的JSX語法 281
11.2 自定義指令 283
11.2.1 自定義指令的基本使用 283
11.2.2 自定義指令的生命周期函數(shù) 285
11.2.3 自定義指令的參數(shù)和修飾符 287
11.2.4 案例：自定義時間格式化指令 288
11.3 teleport內(nèi)置組件 290
11.3.1 認識teleport組件 290
11.3.2 teleport的基本使用 290
11.3.3 teleport中嵌套組件 291
11.3.4 多個teleport組件的使用 291
11.4 Vue.js 3的插件開發(fā) 292
11.4.1 認識Vue.js 3插件 292
11.4.2 對象類型的插件 292
11.4.3 函數(shù)類型的插件 293
11.5 nextTick函數(shù)的原理 294
11.6 本章小結(jié) 297
12 Vue Router路由 299
12.1 認識Vue Router 299
12.1.1 什么是前端路由 299
12.1.2 前端路由的原理 300
12.1.3 認識Vue Router 3