TypeScript + Vue.js 前端開發從入門到精通

《TypeScript+Vue.js前端開發從入門到精通》以一個一線前端架構師的視角，深入淺出地介紹TypeScript與Vue.js整合開發大型前端應用的全部技術細節。全書共17個章節，主要內容包括TypeScript基礎、面向對象編程、Vue中的模板、組件屬性和方法、用戶交互處理、組件基礎與進階、Vue響應性編程、動畫技術、腳手架Vue CLI和Vite工具的使用、Element Plus UI組件庫以及基於Vue的網絡框架vue-axios的應用等。此外，本書還涵蓋Vue路由管理和狀態管理的內容，並通過實戰編程技術論壇系統項目的開發，讓讀者鞏固所學的知識，全面提升自己的前端開發技能。 《TypeScript+Vue.js前端開發從入門到精通》還提供了豐富的配書資源，包括教學視頻、源代碼、代碼導讀手冊，這些資源可以讓讀者學習更輕松和高效。 《TypeScript+Vue.js前端開發從入門到精通》面向TypeScript與Vue.js初學者和有一到兩年經驗的前端開發人員，也適合培訓機構和大中專院校作為教學用書。

目    錄

第 1 章  準備知識 1

1.1  前端技術簡介 2

1.2  HTML入門 3

1.2.1  準備開發工具 3

1.2.2  HTML中的基礎標簽 5

1.3  CSS入門 8

1.3.1  CSS選擇器入門 8

1.3.2  CSS樣式入門 11

1.4  JavaScript入門 14

1.4.1  我們為什麽需要JavaScript 15

1.4.2  JavaScript語法簡介 16

1.4.3  從JavaScript到TypeScript 19

1.5  漸進式開發框架Vue 19

1.5.1  第一個Vue應用 20

1.5.2  範例：一個簡單的用戶登錄頁面 21

1.5.3  Vue 3的新特性 23

1.5.4  我們為什麽要使用Vue框架 24

1.6  本章小結 25

第 2 章  TypeScript基礎 26

2.1  重新認識TypeScript 26

2.1.1  安裝TypeScript 27

2.1.2  TypeScript語言版本的HelloWorld程序 28

2.1.3  使用高級IDE工具 29

2.2  TypeScript中的基本類型 31

2.2.1  布爾、數值與字符串 31

2.2.2  特殊的空值類型 33

2.2.3  數組與元組 34

2.3  TypeScript中有關類型的高級內容 35

2.3.1  枚舉類型 35

2.3.2  枚舉的編譯原理 38

2.3.3  any、never與object類型 39

2.3.4  關於類型斷言 40

2.4  函數的聲明和定義 41

2.4.1  函數的類型 41

2.4.2  可選參數、默認參數和不定個數參數 42

2.4.3  函數的重載 44

2.5  本章小結 45

第 3 章  TypeScript中的面向對象編程 48

3.1  理解與應用“類” 48

3.1.1  類的定義與繼承 48

3.1.2  類的訪問權限控制 51

3.1.3  只讀屬性與存取器 53

3.1.4  關於靜態屬性與抽象類 55

3.1.5  類的實現原理 57

3.2  接口的應用 58

3.2.1  接口的定義 59

3.2.2  使用接口約定函數和可索引類型 60

3.2.3  使用接口來約束類 62

3.2.4  接口的繼承 64

3.3  TypeScript中的類型推斷與高級類型 65

3.3.1  關於類型推斷 65

3.3.2  聯合類型與交叉類型 67

3.3.3  TypeScript的類型區分能力 68

3.3.4  字面量類型與類型別名 70

3.4  本章小結 71

第 4 章  TypeScript編程進階 73

4.1  使用泛型進行編程 73

4.1.1  泛型的簡單使用 73

4.1.2  在類和接口中使用泛型 75

4.1.3  對泛型進行約束 77

4.2  迭代器與裝飾器 78

4.2.1  關於迭代器 79

4.2.2  關於裝飾器 80

4.2.3  裝飾器的組合與裝飾器工廠 83

4.3  命名空間與模塊 84

4.3.1  命名空間的應用 84

4.3.2  使用模塊 86

4.4  本章小結 87

第 5 章  Vue中的模板 88

5.1  模板基礎 88

5.1.1  模板插值 89

5.1.2  模板指令 91

5.2  條件渲染 93

5.2.1  使用v-if指令進行條件渲染 93

5.2.2  使用v-show指令進行條件渲染 96

5.3  循環渲染 97

5.3.1  v-for指令的使用方法 97

5.3.2  v-for指令的高級用法 100

5.4  範例：待辦任務列表 101

5.4.1  使用HTML搭建應用框架結構 101

5.4.2  實現待辦任務列表邏輯 102

5.5  本章小結 104

第 6 章  Vue組件的屬性和方法 105

6.1  屬性與方法基礎 105

6.1.1  屬性基礎 106

6.1.2  方法基礎 106

6.2  計算屬性和偵聽器 107

6.2.1  計算屬性 107

6.2.2  使用計算屬或函數 108

6.2.3  計算屬性的賦值 109

6.2.4  屬性偵聽器 110

6.3  進行函數限流 111

6.3.1  手動實現一個簡易的限流函數 112

6.3.2  使用Lodash庫進行函數限流 113

6.4  表單數據的雙向綁定 114

6.4.1  文本輸入框 114

6.4.2  多行文本輸入區域 115

6.4.3  復選框與單選框 115

6.4.4  選擇列表 116

6.4.5  兩個常用的修飾符 117

6.5  樣式綁定 117

6.5.1  為HTML標簽綁定class屬性 117

6.5.2  綁定內聯樣式 119

6.6  範例：用戶註冊頁面 120

6.6.1  搭建用戶註冊頁面 120

6.6.2  實現註冊頁面的用戶交互 123

6.7  本章小結 125

第 7 章  處理用戶交互 127

7.1  事件的監聽與處理 127

7.1.1  事件監聽示例 128

7.1.2  多事件處理 129

7.1.3  事件修飾符 130

7.2  Vue中的事件類型 132

7.2.1  常用的事件類型 132

7.2.2  按鍵修飾符 134

7.3  實戰一：隨鼠標移動的小球 135

7.4  實戰二：彈球游戲 138

7.5  本章小結 141

 

第 8 章  組件基礎 142

8.1  關於Vue應用與組件 142

8.1.1  Vue應用的數據配置選項 143

8.1.2  定義組件 144

8.2  組件中數據與事件的傳遞 146

8.2.1  為組件添加外部屬性 146

8.2.2  處理組件事件 147

8.2.3  在組件上使用v-model指令 149

8.3  自定義組件的插槽 151

8.3.1  組件插槽的基本用法 151

8.3.2  多具名插槽的用法 153

8.4  動態組件的簡單應用 154

8.5  實戰：開發一款小巧的開關按鈕組件 156

8.6  本章小結 159

第 9 章  組件進階 160

9.1  組件的生命周期與高級配置 160

9.1.1  生命周期方法 161

9.1.2  應用的全局配置選項 164

9.1.3  組件的註冊方式 165

9.2  組件props屬性的高級用法 166

9.2.1  對props屬性進行驗證 166

9.2.2  props的只讀性質 169

9.2.3  組件數據註入 170

9.3  組件Mixin技術 173

9.3.1  使用Mixin來定義組件 173

9.3.2  Mixin選項的合並 175

9.3.3  進行全局Mixin 176

9.4  使用自定義指令 177

9.4.1  認識自定義指令 177

9.4.2  自定義指令的參數 178

9.5  組件的Teleport功能 179

9.6  本章小結 181

第 10 章  Vue響應性編程 183

10.1  響應性編程原理與在Vue中的應用 183

10.1.1  手動追蹤變量的變化 183

10.1.2  Vue中的響應性對象 186

10.1.3  獨立的響應性值Ref的應用 187

10.2  響應式的計算與監聽 189

10.2.1  關於計算變量 190

10.2.2  監聽響應式變量 191

10.3  組合式API的應用 193

10.3.1  關於setup方法 194

10.3.2  在setup方法中定義生命周期行為 195

10.4  實戰：支持搜索和篩選的用戶列表示例 196

10.4.1  常規風格的示例工程開發 196

10.4.2  使用組合式API重構用戶列表頁面 200

10.5  本章小結 202

第 11 章  使用動畫 204

11.1  使用CSS 3創建動畫 204

11.1.1  transition過渡動畫 204

11.1.2  keyframes動畫 206

11.2  使用JavaScript的方式實現動畫效果 208

11.3  Vue過渡動畫 209

11.3.1  定義過渡動畫 209

11.3.2  設置動畫過程中的監聽回調 213

11.3.3  多個組件的過渡動畫 214

11.3.4  列表過渡動畫 216

11.4  實戰：優化用戶列表頁面 217

11.5  本章小結 219

第 12 章  Vue CLI工具的使用 220

12.1  Vue CLI工具入門 220

12.1.1  Vue CLI工具的安裝 221

12.1.2  快速創建Vue項目 222

12.2  Vue CLI項目模板工程 224

12.2.1  模板工程的目錄結構 224

12.2.2  運行Vue項目工程 230

12.2.3  vue-class-component庫簡介 231

12.3  在項目中使用依賴 232

12.4  工程構建 233

12.5  新一代前端構建工具Vite 234

12.5.1  Vite與Vue CLI 235

12.5.2  體驗Vite構建工具 235

12.6  本章小結 237

第 13 章  Element Plus基於Vue 3的UI組件庫 238

13.1  Element Plus入門 238

13.1.1  Element Plus的安裝與使用 239

13.1.2  按鈕組件 242

13.1.3  標簽組件 244

13.1.4  空態圖與加載占位圖組件 246

13.1.5  圖片與頭像組件 249

13.2  表單類組件 251

13.2.1  單選框與多選框 251

13.2.2  標準輸入框組件 253

13.2.3  帶推薦列表的輸入框組件 255

13.2.4  數字輸入框 257

13.2.5  選擇列表 257

13.2.6  多級列表組件 260

13.3  開關與滑塊組件 263

13.3.1  開關組件 263

13.3.2  滑塊組件 264

13.4  選擇器組件 266

13.4.1  時間選擇器 266

13.4.2  日期選擇器 268

13.4.3  顏色選擇器 269

13.5  提示類組件 270

13.5.1  警告組件 270

13.5.2  消息提示 271

13.5.3  通知組件 273

13.6  數據承載相關組件 274

13.6.1  表格組件 274

13.6.2  導航組件 277

13.6.3  標簽頁組件 279

13.6.4  抽屜組件 280

13.6.5  佈局容器組件 281

13.7  實戰：教務系統學生表 283

13.8  本章小結 287

第 14 章  基於Vue的網絡框架vue-axios的應用 288

14.1  使用vue-axios請求天氣數據 288

14.1.1  使用互聯網上免費的數據服務 288

14.1.2  使用vue-axios進行數據請求 291

14.2  vue-axios實用功能介紹 293

14.2.1  通過配置的方式進行數據請求 293

14.2.2  請求的配置與響應數據結構 295

14.2.3  攔截器的使用 296

14.3  實戰：天氣預報應用 297

14.3.1  搭建頁面框架 297

14.3.2  實現天氣預報應用核心邏輯 299

14.4  本章小結 301

第 15 章  Vue路由管理 302

15.1  Vue Router的安裝與簡單使用 302

15.1.1  Vue Router的安裝 303

15.1.2  一個簡單的Vue Router的使用示例 303

15.2  帶參數的動態路由 305

15.2.1  路由參數匹配 305

15.2.2  路由匹配的語法規則 307

15.2.3  路由的嵌套 309

15.3  頁面導航 310

15.3.1  使用路由方法 310

15.3.2  導航歷史控制 312

15.4  關於路由的命名 312

15.4.1  使用名稱進行路由切換 313

15.4.2  路由視圖命名 313

15.4.3  使用別名 314

15.4.4  路由重定向 315

15.5  關於路由傳參 316

15.6  路由導航守衛 317

15.6.1  定義全局的導航守衛 317

15.6.2  為特定的路由註冊導航守衛 318

15.7  動態路由 320

15.8  本章小結 322

第 16 章  Vue狀態管理 323

16.1  認識Vuex框架 323

16.1.1  關於狀態管理 323

16.1.2  安裝與體驗Vuex 325

16.2  Vuex中的一些核心概念 328

16.2.1  Vuex中的狀態state 328

16.2.2  Vuex中的Getter方法 329

16.2.3  Vuex中的Mutation 331

16.2.4  Vuex中的Action 332

16.2.5  Vuex中的Module 333

16.3  本章小結 337

第 17 章  實戰：編程技術論壇系統開發 338

17.1  項目搭建 338

17.1.1  前端項目搭建 338

17.1.2  後端項目搭建 340

17.2  登錄註冊模塊 341

17.2.1  SQLite數據庫的應用 341

17.2.2  用戶登錄註冊服務接口實現 344

17.2.3  前端登錄註冊頁面搭建 348

17.2.4  前端登錄註冊邏輯實現 356

17.3  帖子列表模塊的開發 358

17.3.1  類別與帖子數據庫表的設計 358

17.3.2  類別列表與帖子列表接口開發 360

17.3.3  前端首頁帖子列表模塊開發 364

17.4  帖子發布模塊開發 370

17.4.1  新增創建帖子的後端服務接口 370

17.4.2  前端發布頁面入口添加 372

17.4.3  前端發布帖子頁面開發 374

17.4.4  完善帖子發布模塊 377

17.5  帖子詳情模塊開發 379

17.5.1  帖子詳情模塊後端接口開發 380

17.5.2  前端帖子詳情模塊開發 382

17.6  評論與回復模塊開發 388

17.6.1  評論數據庫表的設計與接口邏輯編寫 388

17.6.2  前端帖子詳情頁評論數據展示 394

17.6.3  前端發布評論功能開發 398

17.7  搜索模塊與退出登錄邏輯開發 400

17.8  本章小結 408