Web前端框架技術 ——Vue+React+Angular框架

李冬海 碩士，畢業於解放軍信息工程學院。曾任解放軍信息。工程大學副教授，從事信號處理的理論與技術研究工作;現為鄭州西亞斯學院副教授，從事軟件工程理論與技術研究，並長期承擔Java程序設計和JavaWeb框架技術等課程的教學工作。主編《輕量級JavaEEWeb框架技術》教材、《頻譜估計理論與應用》專著，並參與編寫《寬帶陣列信號波達方向估計理論與方法》等多本專著。

目錄

 

 

第1篇Vue前端框架入門——非模塊化開發

第1章Vue快速入門——數據展示31.1概述3

1.2準備工作3

1.2.1學習Vue 2還是Vue 33

1.2.2引入Vue 34

1.3編程式渲染DOM5

1.3.1HTML標簽三要素與渲染DOM5

1.3.2編程式渲染5

1.3.3渲染標簽體6

1.3.4渲染標簽屬性8

1.3.5渲染生成新標簽9

1.3.6編程式渲染的缺點10

1.4Vue聲明式渲染DOM11

1.4.1Vue自定義標簽指令11

1.4.2Vue聲明式渲染11

1.4.3數據與DOM（View）解耦12

1.5構建Vue的Hello Vue應用——根組件13

1.5.1引入Vue.js13

1.5.2定義根組件模板（Template）13

1.5.3數據綁定與視圖渲染13

1.5.4定義組件選項對象14

1.5.5定義組件數據14

1.5.6創建Vue應用實例14

1.5.7掛載Vue應用與創建根組件實例15

1.5.8完整代碼框架16

1.5.9運行結果161.6渲染標簽體——數據展示17

1.6.1vtext: 標簽體展示數據17

1.6.2vonce: 展示一次與響應式展示18

1.6.3vpre: 不渲染19

1.6.4vcloak: 解析完成後展示數據20

1.6.5vhtml: 動態渲染HTML21

1.7渲染標簽屬性——vbind22

1.7.1vbind標簽屬性綁定數據22

1.7.2vbind簡寫語法23

1.7.3vbind綁定對象24

1.7.4總結25

1.8標簽樣式綁定26

1.8.1class綁定26

1.8.2style綁定27

1.8.3樣例27

1.9條件渲染與列表渲染29

1.9.1條件渲染: vif29

1.9.2列表渲染: vfor30

目錄〖3〗第2章Vue中的數據管理33

2.1命名規則和選項式API33

2.1.1Vue中的命名規則33

2.1.2選項式API34

2.2簡單計數器中的數據及處理34

2.2.1簡單計數器34

2.2.2示例代碼34

2.3數據data選項36

2.3.1定義數據data36

2.3.2數據掛載37

2.3.3數據訪問37

2.3.4響應式渲染38

2.4處理數據methods選項38

2.4.1定義方法methods38

2.4.2方法掛載39

2.4.3訪問方法39

2.5計算屬性數據computed選項40

2.5.1定義計算屬性computed40

2.5.2計算屬性掛載41

2.5.3計算屬性訪問41

2.5.4響應式更新43

2.5.5緩存應用44

2.6監聽數據變化watch45

2.6.1watch監聽數據變化45

2.6.2定義watch46

2.6.3動態handler函數47

2.6.4總結與註意事項48

第3章數據交互與用戶輸入50

3.1綁定事件監聽器von50

3.1.1von的基本用法50

3.1.2事件參數傳遞52

3.1.3事件冒泡54

3.1.4事件修飾符55

3.2雙向數據綁定vmodel56

3.2.1單向綁定與雙向綁定56

3.2.2vmodel的實現機理57

3.2.3雙向綁定單選框58

3.2.4雙向綁定復選框59

3.2.5雙向綁定下拉框60

3.3從jQuery到MVVM——前端開發模式的演變61

3.3.1傳統前端框架jQuery61

3.3.2MVVM框架61

3.3.3Vue中的編程式渲染——模板引用（ref）63

第4章組件入門——自定義標簽65

4.1用戶卡片組件65

4.1.1用戶卡片組件的效果65

4.1.2用戶卡片組件的代碼65

4.2Vue中的組件構架67

4.2.1組件化思想67

4.2.2組件的構成要素68

4.2.3自定義標簽的應用68

4.2.4組件定義與自定義標簽的關系69

4.3定義組件70

4.3.1組件的組成70

4.3.2定義組件: HTML模板模式71

4.3.3定義組件: 字符串模板72

4.3.4定義組件: 模板字符串模板72

4.4組件的使用步驟73

4.4.1註冊為全局組件73

4.4.2註冊為局部組件73

4.4.3組件名稱的規則73

4.4.4使用組件74

4.5父組件向子組件傳遞數據——組件props75

4.5.1組件props的作用與父子通信機制75

4.5.2在子組件中聲明props(接收數據)75

4.5.3在子組件模板中使用props數據76

4.5.4在子組件腳本中使用props數據77

4.6子組件向父組件傳遞數據77

4.6.1組件通信78

4.6.2子組件聲明自定義事件: emits78

4.6.3子組件觸發自定義事件: $emit79

4.6.4父組件監聽自定義事件: von80

4.6.5父組件監聽子組件數據變化: @input81

第5章Vue組件插槽機制的深入解析83

5.1插槽基礎83

5.1.1父組件向子組件傳遞標簽體83

5.1.2插槽內容與出口84

5.2無名插槽84

5.2.1定義與使用無名插槽84

5.2.2渲染作用域85

5.2.3默認內容86

5.3具名插槽87

5.3.1定義與使用具名插槽87

5.3.2動態插槽名90

5.4作用域插槽90

5.4.1作用域插槽概述90

5.4.2具名作用域插槽92

5.5總結93

第2篇前端框架構建工具與腳手架

第6章構建工具——依賴包管理976.1Node.js簡介與作用97

6.1.1Node.js簡介97

6.1.2Node.js的作用98

6.2安裝Node.js99

6.2.1下載Node.js99

6.2.2在Windows 7上安裝高版本Node.js99

6.2.3設置環境變量Path100

6.2.4測試安裝100

6.3包管理器npm100

6.3.1依賴包管理100

6.3.2npm的安裝與驗證101

6.4npm本地倉庫的配置101

6.4.1默認本地全局倉庫的位置102

6.4.2設置自定義全局倉庫102

6.4.3全局配置與用戶配置文件102

6.4.4添加執行程序的路徑103

6.5npm鏡像倉庫的配置及其他包管理器103

6.5.1設置npm鏡像倉庫103

6.5.2鏡像倉庫管理工具: nrm104

6.5.3Node包管理器: yarn105

6.5.4Node包管理器: pnpm106

6.6構建Node.js項目106

6.6.1使用npm init構建項目骨架106

6.6.2使用npm install安裝項目依賴107

6.6.3使用npm install安裝所有項目依賴108

6.6.4使用require引入依賴包108

6.6.5使用node命令運行項目109

6.7Node模塊配置文件package.json109

6.7.1package.json的配置109

6.7.2必需屬性112

6.7.3描述信息114

6.7.4依賴配置115

6.7.5腳本配置117

6.7.6入口文件配置118

6.7.7命令行入口配置119

6.7.8發布配置120

6.7.9第三方配置121

6.8開發工具122

6.8.1Visual Studio Code(VSCode)122

6.8.2VSCode調試功能123

6.8.3指定主程序入口123

6.8.4調試任意文件（調試當前文件）124

第7章構建Vue Hello World應用126

7.1Vue項目的構建工具126

7.1.1構建工具Vue CLI126

7.1.2安裝Vue CLI127

7.1.3Windows 7安裝高版本Node.js Vue錯誤127

7.1.4使用命令行構建項目128

7.1.5使用圖形界面搭建項目128

7.2運行項目129

7.2.1運行配置129

7.2.2啟動開發服務器129

7.2.3訪問項目129

7.3調試Vue項目130

7.3.1配置vue.config.js130

7.3.2配置調試launch.json131

第8章Vue 3項目構建解析: Hello World深入剖析132

8.1項目構建內容132

8.1.1項目目錄結構132

8.1.2項目初始文件133

8.2前端首頁文件index.html133

8.2.1自動創建index.html133

8.2.2index.html的作用與特性133

8.3構建的入口文件main.js134

8.3.1後臺構建的入口文件main.js134

8.3.2入口文件的配置134

8.4後臺構建入口文件分析135

8.4.1導入依賴模塊135

8.4.2創建Vue實例: createApp135

8.4.3掛載到主頁136

8.4.4Webpack的核心作用136

第9章構建工具——語法檢查ESLint138

9.1ESLint簡介138

9.2檢查配置138

9.2.1Vue中的配置示例138

9.2.2root參數與配制文件作用域139

9.2.3編譯環境env139

9.2.4代碼解析parser和parserOptions139

9.2.5繼承規則extends139

9.2.6自定義規則rules140

9.2.7插件規則plugins141

9.2.8特點文件檢查overrides141

9.3執行檢查141

9.3.1在Vue CLI中執行ESLint檢測141

9.3.2在VSCode中集成ESLint插件141

9.3.3使用EditorConfig和Prettier維護代碼風格142

第10章構建工具——編譯之語法轉換Babel143

10.1編譯工具143

10.1.1背景介紹143

10.1.2編譯的本質143

10.1.3Babel編譯器144

10.2插件配置144

10.2.1配置插件144

10.2.2轉換插件的示例144

10.3Vue中的Babel插件145

10.3.1Vue中安裝Babel插件145

10.3.2Vue中配置插件145

10.4JSX技術146

10.4.1JSX簡介146

10.4.2JSX的語法147

第11章構建工具——打包工具149

11.1打包項目149

11.1.1打包工具的關鍵功能149

11.1.2打包需求149

11.1.3安裝打包工具Webpack150

11.1.4配置打包151

11.1.5運行打包151

11.2Webpack的核心概念152

11.2.1模塊打包器152

11.2.2Loader文件處理與轉換152

11.2.3Plugin功能擴展與配置153

11.2.4Webpack的構建流程153

11.3開發工具vuecliservice153

11.3.1運行: vuecliservice serve154

11.3.2打包: vuecliservice build154

11.4Vite構建Vue Hello World應用155

11.4.1從Webpack到Vite的轉變155

11.4.2創建並運行Vue Hello World應用155

11.4.3項目結構分析156

11.5打包工具的對比157

11.5.1Webpack158

11.5.2Rollup158

11.5.3Parcel158

11.5.4Vite158

第3篇Vue前端框架深入——模塊化開發

第12章Vue組合式中的數據管理——入門16312.1模塊化編程與單文件組件163

12.1.1模塊化編程163

12.1.2單文件組件164

12.2組合式編程入門setup166

12.2.1JavaScript簡單計數器166

12.2.2選項式下的簡單計數器167

12.2.3組合式下的簡單計數器168

12.2.4組合式API170

12.3響應式數據171

12.3.1包裝基本類型數據: ref函數171

12.3.2包裝對象數據: reactive函數173

12.4計算屬性——computed函數174

12.4.1computed函數的用法174

12.4.2響應式數據175

12.4.3緩存數據176

12.5數據處理方法177

12.5.1直接定義函數177

12.5.2組合函數（自定義Hook）178

12.6監聽數據變化——watch函數180

12.6.1watch函數的用法180

12.6.2watch監聽示例181

12.6.3watch監聽選項182

第13章Vue組合式數據管理——進階185

13.1組合式編程深入185

13.1.1setup定義和暴露狀態與行為185

13.1.2組合式API的改進與優化186

13.1.3組合式的編程思想187

13.1.4組合式與選項式188

13.2組合函數編程與模塊化編程189

13.2.1獨立的組合函數189

13.2.2組合函數的結構189

13.2.3組合函數的使用190

13.2.4運行測試191

13.3響應式數據進階192

13.3.1響應式數據的實現機理192

13.3.2響應式的實現192

13.3.3淺層包裝: shallowReactive193

13.3.4淺層包裝: shallowRef195

13.3.5手動觸發響應: triggerRef197

13.3.6自定義響應包裝: customRef198

13.4計算屬性computed函數199

13.4.1計算屬性的內存結構199

13.4.2計算屬性的包裝器200

13.4.3計算屬性的復用200

13.5監聽數據變化——watchEffect函數201

13.5.1watch監聽某些數據源201

13.5.2watchEffect監聽所有響應式數據203

13.5.3副作用的執行機制204

13.5.4副作用的清除205

13.5.5停止監聽器206

13.5.6底層監聽函數effect207

13.6只讀響應式對象207

13.6.1深層只讀: readonly207

13.6.2淺層只讀: shallowReadonly209

13.7響應式類型檢測210

13.7.1isRef: 判斷Ref類型210

13.7.2isReactive: 判斷Reactive類型210

13.7.3isReadonly: 判斷Readonly類型210

13.7.4isProxy: 判斷Vue代理對象210

13.7.5總結211

13.8響應式類型轉換211

13.8.1解構與響應性211

13.8.2響應式解包和雙向綁定212

13.8.3markRaw: 標記為原始對象214

13.8.4toRaw: 解包代理對象215

13.8.5unref: 解包ref215

13.8.6toRefs: 響應式解構216

13.8.7toRef: 單屬性響應式解構218

13.9副作用作用域221

13.9.1effectScope(): 作用域的隔離與管理221

13.9.2獲取當前作用域: getCurrentScope223

13.9.3生命周期管理: stop223

13.9.4自動清理回調註冊: onScopeDispose223

第14章組件間的數據交互與通信機制224

14.1組件間的數據交互概述224

14.1.1setup的封閉特性與外部交互方式224

14.1.2setup與組件實例的隱式交互225

14.1.3setup與組件實例的顯式交互226

14.1.4組件與外部數據的傳遞及方向性226

14.2父組件向子組件傳遞數據（props）228

14.2.1使用props實現父子通信的基本流程228

14.2.2定義子組件屬性229

14.2.3在子組件模板中使用組件屬性229

14.2.4在子組件setup中使用組件參數230

14.2.5在父組件中綁定子組件屬性230

14.3子組件向父組件通信（emit）232

14.3.1子組件向父組件通信的原理232

14.3.2子組件聲明自定義事件: emits232

14.3.3組件setup的上下文: context233

14.3.4子組件觸發自定義事件: context.emit233

14.3.5父組件監聽自定義事件: von234

14.4祖先組件向後代組件傳遞（provide/inject）234

14.4.1provide/inject概述234

14.4.2provide/inject選項式235

14.4.3provide/inject組合式237

14.5非父子組件間的通信（Event Bus事件總線）239

14.5.1Event Bus的簡介239

14.5.2Event Bus的應用241

14.6使用組合函數進行數據交互243

14.6.1利用use函數增強組件與外部資源的交互243

14.6.2官方提供的組合函數244

14.6.3獲取非props屬性: useAttrs245

13.6.4獲取插槽內容: useSlots246

14.7VueUse工具庫247

14.7.1VueUse工具庫概述247

14.7.2VueUse工具示例247

14.8模板引用ref操作DOM248

14.8.1模板引用——選項式248

14.8.2模板引用——組合式250

第15章組件狀態管理與持久化252

15.1狀態管理入門252

15.1.1組件內狀態252

15.1.2組件內狀態保持253

15.1.3狀態的有效範圍254

15.1.4狀態管理與數據交換254

15.2狀態保持255

15.2.1全局變量狀態保持256

15.2.2模塊級狀態保持257

15.2.3狀態保持的持久化259

15.3Pinia狀態管理261

15.3.1Pinia狀態管理簡介261

15.3.2Pinia的安裝和全局註冊262

15.4Pinia選項式API263

15.4.1Pinia選項式概述263

15.4.2Pinia選項式管理計數器狀態263

15.5Pinia組合式API265

15.5.1Pinia的組合式管理計數器狀態265

15.5.2模塊共享模式替代Pinia266

15.5.3狀態與組件解耦267

第16章數據服務器268

16.1創建Web服務268

16.1.1建立Node項目268

16.1.2安裝Express268

16.1.3創建Express應用268

16.1.4跨域配置270

16.2學生RESTful API設計與實現270

16.2.1RESTful API概述270

16.2.2學生控制器271

16.2.3數據存儲272

16.3學生RESTful API的增刪改查操作273

16.3.1查詢學生: GET方法273

16.3.2查詢所有學生: GET方法273

16.3.3增加學生: POST方法273

16.3.4更新學生: PUT方法274

16.3.5刪除學生: DELETE方法274

第17章數據獲取與提交——Axios275

17.1Axios入門275

17.1.1Axios簡介275

17.1.2獲取數據: axios.get276

17.1.3更新數據: axios.put276

17.1.4增加數據: axios.post277

17.1.5刪除數據: axios.delete278

17.2Axios的作用範圍279

17.2.1組件內部作用域279

17.2.2模塊共享作用域280

17.3默認全局作用域282

17.3.1全局默認配置: axios.defaults282

17.3.2組件中使用默認配置axios283

17.3.3獲取數據的時機283

17.4全局掛載Axios實例284

17.4.1顯式掛載到全局屬性（app.config.globalProperties）284

17.4.2隱式掛載到全局屬性與插件橋接284

17.5組件中使用全局Axios實例286

17.5.1訪問全局屬性Axios286

17.5.2通過組件實例訪問Axios286

17.5.3通過導入Axios共享模塊訪問287

17.5.4小結287

17.6全局配置Axios287

17.6.1全局配置Axios的優點288

17.6.2Axios全局配置與實例配置288

17.7攔截器——axios.interceptors289

17.7.1請求攔截器: axios.interceptors.request289

17.7.2響應攔截器: axios.interceptors.response290

第4篇Vue前端框架高級特性

——組件深度解析、路由與樣式管理第18章組件的生命周期29518.1組件的生命周期簡介295

18.1.1組合式生命周期鉤子295

18.1.2組合式生命周期與實例關聯296

18.1.3選項式生命周期選項296

18.1.4生命周期圖297

18.2選項式生命周期298

18.2.1示例說明298

18.2.2加載生命周期299

18.2.3更新生命周期300

18.2.4卸載生命周期301

18.3組合式生命周期302

18.3.1示例說明302

18.3.2加載生命周期304

18.3.3更新生命周期304

18.3.4卸載生命周期305

18.3.5運行結果305

第19章Vue路由基礎307

19.1路由的概念307

19.1.1路由的定義307

19.1.2Vue 3中的路由308

19.2Vue 3路由的模式309

19.2.1Vue 3路由的模式概覽309

19.2.2基於Hash（Hash Mode）的導航309

19.2.3基於HTML5 History API的導航309

19.3全局路由表配置310

19.3.1導入組件310

19.3.2配置路由表routes311

19.4全局路由配置312

19.4.1全局路由配置簡介312

19.4.2創建全局路由實例312

19.4.3全局註冊路由313

19.5組件中使用路由器314

19.5.1引入314

19.5.2路由器的使用314

19.5.3通過組件實例this.$router訪問314

19.5.4通過組合函數useRouter訪問315

19.5.5通過模塊共享導入訪問316

19.6路由導航——無參模式317

19.6.1路由鏈接組件導航317

19.6.2路由渲染位置318

19.6.3編程式導航: router.push318

第20章Vue路由進階: 組件響應多請求的實現320

20.1路由導航——動態路由320

20.1.1動態路由的定義320

20.1.2動態路由導航: params321

20.1.3監聽動態路由: route.params322

20.1.4組件接收動態路由參數: route.params322

20.2路由導航——查詢參數（Query）323

20.2.1路由傳參323

20.2.2路由定義查詢參數324

20.2.3路由導航中的查詢參數: Query325

20.2.4監聽路由的查詢參數: route.query326

20.2.5組件接收查詢參數: route.query326

20.3路由導航——props傳參326

20.3.1路由定義: props傳參327

20.3.2路由導航: props參數328

20.3.3監聽路由的地址: route.fullPath328

20.3.4組件從props獲取參數329

20.4路由的其他知識點329

20.4.1多級路由329

20.4.2路由守衛330

20.4.3動態添加路由332

第21章組件的高級特性334

2.1.1單文件組件334

21.1.1區塊預處理: lang334

21.1.2區塊預處理: 自定義區塊335

21.1.3區塊導入文件Src336

21.1.4註釋337

21.2全局應用338

21.2.1入口程序: main.js338

21.2.2定義根組件: App.vue339

21.2.3創建Vue應用: createApp340

21.2.4掛載: app.mount341

21.2.5全局提供數據: app.provide341

21.2.6安裝全局插件: app.use341

21.2.7註冊全局組件: app.component342

21.2.8註冊全局指令: app.directive342

21.2.9註冊全局復用代碼塊: app.mixin343

21.3全局配置343

21.3.1性能設置: app.config.performance343

21.3.2編譯選項: app.config.compilerOptions343

21.3.3全局屬性配置: app.config.globalProperties344

21.3.4合並選項: app.config.optionMergeStrategies344

21.4動態組件345

21.4.1基本語法345

21.4.2動態組件屬性345

21.4.3動態組件事件346

21.4.4動態切換組件346

21.4.5小結347

21.5自定義渲染組件349

21.5.1自定義渲染render349

21.5.2選項式自定義渲染350

21.5.3組合式自定義渲染351

21.5.4系統指令的render實現352

21.6JSX組件354

21.6.1Vue.js中的JSX354

21.6.2JSX的用法354

21.7Mixins代碼塊復用356

21.7.1Mixins簡介356

21.7.2Mixins的應用356

21.8自定義指令357

21.8.1自定義指令的生命周期357

21.8.2定義自定義指令358

21.8.3註冊自定義指令359

21.8.4使用自定義指令360

第22章<script setup>語法糖361

22.1<script setup>語法糖入門361

22.1.1什麼是<script setup>361

22.1.2<script setup>計數器361

22.1.3setup語法糖省略了什麼？362

22.1.4setup語法糖編譯補充363

22.2<script setup>中的組件屬性和事件363

22.2.1defineProps()和defineEmits()363

22.2.2用戶卡片setup模式——定義組件屬性和事件364

22.2.3用戶卡片列表setup模式——局部組件註冊365

22.3顯式暴露defineExpose與模板引用367

22.3.1隱式暴露與顯式暴露367

22.3.2子組件defineExpose暴露數據和方法367

22.3.3<script setup>語法糖中的模板引用368

22.3.4在父組件中模板引用訪問子組件368

22.4<script setup>的其他語法糖369

22.4.1provide和inject369

22.4.2使用自定義指令369

22.4.3頂層await370

第23章組件樣式管理371

23.1單文件組件中的CSS作用域371

23.1.1局部作用域: <style scoped>371

23.1.2深度選擇器: deep372

23.1.3全局選擇器: global374

23.1.4混合使用局部與全局樣式374

23.1.5插槽選擇器:slotted375

23.2CSS模塊化376

23.2.1<style module>376

23.2.2自定義註入名稱377

23.2.3獨立CSS模塊文件378

23.3動態樣式379

23.3.1使用vbind()實現動態綁定379

23.3.2使用內聯樣式實現動態樣式381

第24章CSS預處理382

24.1CSS預處理概述382

24.1.1預處理簡介382

24.1.2預處理的安裝382

24.1.3語法風格383

24.1.4配置構建工具384

24.1.5單文件組件導入386

24.1.6全局樣式文件導入386

24.2CSS預處理特性386

24.2.1定義變量（Variables）386

24.2.2選擇器嵌套（Nesting）387

24.2.3混合（@mixin）388

24.2.4繼承（@extend）390

24.2.5導入（@import）392

24.2.6註釋（Comments）392

24.3CSS預處理的高級特性393

24.3.1運算393

24.3.2函數393

24.3.3顏色函數395

24.3.4控制結構——條件語句397

24.3.5Sass(Scss)循環語句398

24.3.6Less循環語句399

24.3.7Stylus循環語句400

24.4應用實例400

24.4.13D文本400

24.4.2屬性前綴402

第5篇前端框架實戰——第三方組件庫、國際化與錯誤處理

第25章第三方組件庫——Ant Design40725.1Ant Design for Vue407

25.1.1局部導入組件407

25.1.2全局註冊組件408

25.2Ant Design列表組件408

25.2.1學生列表408

25.2.2表格組件<atable>409

25.2.3個性化列410

25.2.4卡片組件<acard>詳解411

25.2.5表格組件<atable>詳解412

25.2.6按鈕組件<abutton>詳解413

25.3Ant Design表單組件414

25.3.1編輯學生414

25.3.2表單組件<aform>415

25.3.3表單驗證rules416

第26章國際化與Vuei18n417

26.1Vue 3國際化: Vuei18n基礎417

26.1.1安裝Vuei18n417

26.1.2創建語言包（字典表）417

26.1.3創建i18n實例418

26.1.4全局註冊i18n418

26.1.5測試國際化實例418

26.2組件中使用國際化419

26.2.1通過組件實例訪問419

26.2.2通過useI18n組合函數訪問421

26.2.3通過導入i18n實例模塊訪問422

26.2.4切換語言423

第27章錯誤處理: 構建健壯的應用程序425

27.1全局錯誤處理425

27.1.1設置全局錯誤處理: app.config.errorHandler425

27.1.2設置全局警告處理: app.config.warnHandler425

27.2使用通知服務顯示錯誤426

27.2.1配置全局錯誤處理426

27.2.2測試錯誤處理426

27.3組件級別錯誤的捕獲與處理427

27.3.1使用onErrorCaptured捕獲錯誤427

27.3.2測試錯誤處理427

27.3.3錯誤傳遞規則428

27.4其他錯誤處理方法428

27.4.1代碼塊級別錯誤處理: try/catch429

27.4.2錯誤日誌服務429

第6篇跨框架入門——Vue、React、Angular

第28章React入門43328.1React概述433

28.1.1React簡介433

28.1.2React通用設計原則434

28.2使用Create React App構建Hello World項目434

28.2.1安裝構建工具CRA435

28.2.2創建新項目435

28.2.3運行項目435

28.2.4修改應用程序以輸出"Hello World!"436

28.3函數組件437

28.3.1函數組件概述437

28.3.2函數組件設計模式438

28.3.3函數組件與Vue組合式API438

28.3.4函數組件與Vue的setup函數的對比439

28.3.5函數組件示例440

28.4函數組件中的狀態管理441

28.4.1簡單計數器示例441

28.4.2定義狀態數據useState442

28.4.3處理數據——更新狀態443

28.4.4渲染數據——返回渲染模板443

28.4.5使用組件445

28.5父子函數組件數據傳遞445

28.5.1子組件中接收屬性445

28.5.2父組件中傳遞屬性: {}445

28.5.3子組件中調用回調函數446

28.5.4父組件中綁定回調函數: {}447

28.6類組件447

28.6.1類組件的設計模式448

28.6.2類組件與Vue選項式API448

28.6.3類組件示例449

28.7類組件計數器450

28.7.1簡單計數器450

28.7.2定義組件狀態數據: this.state451

28.7.3更新狀態: this.setState452

28.7.4渲染數據: render方法452

28.7.5父子組件的數據傳遞453

第29章Angular入門455

29.1Angular概述455

29.1.1Angular簡介455

29.1.2Angular的架構模式456

29.1.3Angular組件的實現方式456

29.1.4Angular組件與Vue選項式API組件的對比458

29.2構建一個Angular的Hello World項目459

29.2.1使用Angular CLI創建項目459

29.2.2創建一個新的Angular項目459

29.2.3修改應用以顯示Hello World459

29.2.4運行項目460

29.3類組件: 構建一個計數器460

29.3.1創建一個計數器組件: ng generate460

29.3.2組件的類文件461

29.3.3組件狀態和行為462

29.3.4組件中的元數據464

29.3.5模板中的數據渲染466

29.3.6父組件中使用子組件467

29.4父子組件的數據傳遞468

29.4.1定義組件屬性: @Input()468

29.4.2父組件綁定子組件屬性: ［］468

29.4.3定義輸出事件: @Output468

29.4.4父組件綁定子組件輸出事件: ()469