★★第1篇 初識Vue.js

★第1章 理解Vue.js及產生的背景 /2
1.1 什么是Vue.js /2
1.2 Vue.js產生的背景 /2
1.2.1 Vue.js與jQuery的不同 /2
1.2.2 Vue.js與React、Angular的比較 /3
1.2.3 如何選擇Angular、React和Vue.js /4
1.3 如何學習Vue.js /5
1.3.1 前置知識 /5
1.3.2 學習安排 /5

★第2章 快速開啟第一個Vue.js應用 /6
2.1 開發環境準備 /6
2.1.1 安裝Node.js和NPM /6
2.1.2 設置NPM鏡像 /7
2.1.3 選擇合適的IDE /7
2.1.4 安裝Vue CLI /8
2.1.5 檢查和調試Vue.js應用的工具——Vue Devtools /8
2.2 創建Vue.js應用“hello-world” /8
2.2.1 利用Vue CLI初始化Vue.js應用“hello-world” /9
2.2.2 運行Vue.js應用“hello-world” /12
2.3 探索Vue.js應用 /13
2.3.1 整體項目結構 /13
2.3.2 項目根目錄文件 /14
2.3.3 node_modules目錄 /14
2.3.4 public目錄 /14
2.3.5 src目錄 /15
2.4 在Vue.js應用中使用TypeScript /19
2.4.1 基于“Vue 3 Preview”創建項目 /19
2.4.2 基于“Manually select features”創建項目 /20
2.4.3 TypeScript應用的差異 /22

★★第2篇 基礎

★第3章 TypeScript基礎 /26
3.1 TypeScript概述 /26
3.1.1 TypeScript與JavaScript、ECMAScript的關系 /26
3.1.2 TypeScript與Vue.js的關系 /27
3.1.3 使用TypeScript的優勢 /27
3.1.4 安裝TypeScript /28
3.1.5 TypeScript代碼的編譯及運行 /28
3.2 變量與常量 /29
3.2.1 var、let、const三者的作用域 /29
3.2.2 變量與常量的區別 /29
3.2.3 變量提升 /30
3.3 TypeScript數據類型 /31
3.3.1 基本類型 /31
3.3.2 對象類型 /35
3.3.3 任意類型 /35
3.3.4 聯合類型 /37
3.3.5 交集類型 /37
3.4 強大的面向對象體系 /38
3.4.1 類 /38
3.4.2 接口 /43
3.4.3 【實戰】演示接口的使用 /43
3.4.4 泛型 /44
3.4.5 【實戰】演示泛型的使用 /44
3.4.6 枚舉 /45
3.5 TypeScript的命名空間 /46
3.5.1 聲明命名空間 /46
3.5.2 【實戰】聲明命名空間 /46
3.5.3 命名空間體 /47
3.5.4 導入別名聲明 /47
3.5.5 【實戰】導入別名聲明 /48
3.5.6 導出聲明 /49
3.5.7 合并聲明 /49
3.5.8 【實戰】合并聲明 /49
3.6 TypeScript 模塊 /50
3.6.1 了解模塊 /51
3.6.2 【實戰】導入聲明 /51
3.6.3 【實戰】導入Require聲明 /52
3.6.4 【實戰】導出聲明 /52
3.6.5 【實戰】導出分配 /52
3.6.6 了解CommonJS模塊 /53
3.6.7 了解AMD模式 /54
3.7 裝飾器 /55
3.7.1 定義裝飾器 /55
3.7.2 了解裝飾器的執行時機 /56
3.7.3 認識4類裝飾器 /57

★第4章 Vue.js應用實例——一切的起點 /63
4.1 創建“應用實例” /63
4.1.1 第一個“應用實例” /63
4.1.2 讓“應用實例”執行方法 /64
4.1.3 理解選項對象 /64
4.1.4 理解根組件 /65
4.1.5 理解MVVM模型 /66
4.2 data property與methods /66
4.2.1 理解data property /67
4.2.2 理解data methods /67
4.3 Vue.js的生命周期 /69
4.3.1 生命周期中的鉤子函數 /69
4.3.2 生命周期的圖示 /70
4.3.3 【實戰】生命周期鉤子函數的實例 /71

★第5章 Vue.js組件——獨立的程序單元 /76
5.1 組件的基本概念 /76
5.1.1 【實戰】一個最簡單的Vue.js組件的實例 /76
5.1.2 什么是組件 /78
5.1.3 【實戰】一個子組件的復用實例 /79
5.1.4 Vue.js組件與Web組件的異同點 /80
5.2 組件的交互方式 /80
5.2.1 【實戰】通過prop向子組件傳遞數據 /80
5.2.2 【實戰】監聽子組件的事件 /81
5.2.3 【實戰】兄弟組件之間的通信 /84
5.2.4 【實戰】通過插槽分發內容 /87
5.3 讓組件可以動態加載 /90
5.3.1 實現組件動態加載的步驟 /90
5.3.2 【實戰】動態組件的實例 /90
5.4 使用＜keep-alive＞緩存組件 /96
5.4.1 【實戰】＜keep-alive＞的例子 /97
5.4.2 ＜keep-alive＞緩存組件的配置詳解 /98

★第6章 Vue.js模板——讓內容隨著模板中變量的變化而變化 /101
6.1 了解Vue.js的模板 /101
6.2 【實戰】在模板中使用插值 /102
6.2.1 文本 /102
6.2.2 原生HTML代碼 /103
6.2.3 綁定HTML attribute /104
6.2.4 JavaScript表達式 /104
6.3 【實戰】在模板中使用指令 /105
6.3.1 理解指令中的參數 /106
6.3.2 理解指令中的動態參數 /107
6.3.3 理解指令中的修飾符 /108
6.4 【實戰】在模板中使用指令的縮寫 /108
6.4.1 使用v-bind指令的縮寫 /108
6.4.2 使用v-on指令的縮寫 /109
6.5 使用模板的一些約定 /109
6.5.1 對動態參數值的約定 /109
6.5.2 對動態參數表達式的約定 /110
6.5.3 對訪問全局變量的約定 /110

★第7章 Vue.js計算屬性與偵聽器——處理響應式數據的復雜邏輯 /111
7.1 通過實例理解“計算屬性”的必要性 /111
7.2 【實戰】一個“計算屬性”的實例 /112
7.2.1 聲明“計算屬性” /112
7.2.2 模擬數據更改 /114
7.3 “計算屬性”緩存與方法的關系 /114
7.4 為什么需要偵聽器 /115
7.4.1 理解偵聽器 /115
7.4.2 【實戰】一個偵聽器的實例 /116

★第8章 Vue.js樣式——讓應用變得好看 /119
8.1 綁定樣式class /119
8.1.1 【實戰】在class中綁定對象 /119
8.1.2 【實戰】在class中綁定數組 /121
8.1.3 【實戰】在組件上使用class /122
8.2 綁定內聯樣式 /122
8.2.1 【實戰】在內聯樣式中綁定對象 /123
8.2.2 【實戰】在內聯樣式中綁定數組 /124
8.2.3 【實戰】在內聯樣式中綁定多重值 /124

★第9章 Vue.js表達式——根據條件來渲染不同的內容 /126
9.1 條件表達式 /126
9.1.1 【實戰】v-if指令的實例 /126
9.1.2 【實戰】v-else指令的實例 /127
9.1.3 【實戰】v-else-if指令的實例 /127
9.1.4 【實戰】v-show指令的實例 /128
9.1.5 理解v-if指令與v-show指令的關系 /128
9.2 for循環表達式 /129
9.2.1 【實戰】使用v-for指令遍歷數組 /129
9.2.2 【實戰】使用v-for指令遍歷數組設置索引 /131
9.2.3 【實戰】使用v-for指令遍歷對象的property名稱 /132
9.2.4 【實戰】數組過濾 /135
9.2.5 【實戰】使用值的范圍 /136
9.3 v-for指令的不同使用場景 /137
9.3.1 【實戰】在＜template＞中使用v-for指令 /137
9.3.2 【實戰】v-for指令與v-if指令一起使用 /138
9.3.3 【實戰】在組件上使用v-for指令 /139

★第10章 Vue.js事件——通知做事的狀態 /142
10.1 什么是事件 /142
10.1.1 【實戰】一個簡單的監聽事件實例 /142
10.1.2 理解事件的處理方法 /143
10.1.3 處理原始的DOM事件 /144
10.1.4 為什么需要在HTML代碼中監聽事件 /145
10.2 【實戰】多事件處理器的實例 /146
10.3 事件修飾符 /147
10.3.1 什么是事件修飾符 /147
10.3.2 按鍵修飾符 /149
10.3.3 系統修飾符 /149

★第11章 Vue.js表單——采集用戶輸入的數據 /151
11.1 理解“表單輸入綁定” /151
11.2 【實戰】“表單輸入綁定”的基礎用法 /152
11.2.1 文本 /152
11.2.2 多行文本 /153
11.2.3 復選框 /153
11.2.4 單選按鈕 /155
11.2.5 選擇框 /156
11.3 【實戰】對表單進行值綁定 /157
11.3.1 復選框 /157
11.3.2 單選按鈕 /158
11.3.3 選擇框 /160
11.4 【實戰】表單修飾符的使用 /161
11.4.1 使用.lazy修飾符的實例 /162
11.4.2 使用.number修飾符的實例 /163
11.4.3 使用.trim修飾符的實例 /163

★★第3篇 進階

★第12章 深入組件 /166
12.1 什么是“組件注冊” /166
12.1.1 理解“組件注冊” /166
12.1.2 組件命名 /167
12.2 理解全局注冊 /169
12.3 【實戰】一個局部注冊的實例 /170
12.4 【實戰】一個模板引用的實例 /171
12.5 深入介紹prop（輸入屬性） /173
12.5.1 理解prop /173
12.5.2 prop類型 /174
12.5.3 【實戰】傳遞動態prop /175
12.5.4 【實戰】傳遞動態prop數字 /176
12.5.5 【實戰】傳遞動態prop布爾值 /178
12.5.6 【實戰】傳遞動態prop數組 /179
12.5.7 【實戰】傳遞動態prop對象 /181
12.5.8 【實戰】傳遞動態prop對象中的所有property /182
12.5.9 理解單向下行綁定 /185
12.5.10 【實戰】prop類型驗證 /186
12.6 理解非prop的attribute /189
12.6.1 【實戰】attribute繼承 /189
12.6.2 【實戰】禁用attribute繼承 /191
12.6.3 【實戰】多個根節點上的attribute繼承 /192
12.7 自定義事件 /195
12.7.1 如何給事件命名 /196
12.7.2 【實戰】一個自定義事件的實例 /196
12.8 深入介紹插槽 /199
12.8.1 理解插槽內容 /199
12.8.2 了解渲染作用域 /200
12.8.3 【實戰】后備內容（默認內容）的實例 /201
12.8.4 【實戰】具名插槽（帶名字的插槽）的實例 /204
12.8.5 了解具名插槽的縮寫 /209
12.9 理解“依賴注入” /210
12.9.1 “依賴注入”的優點 /210
12.9.2 【實戰】“依賴注入”的實例 /211
12.10 【實戰】異步組件的實例 /215

★第13章 深入樣式 /217
13.1 過渡與動畫的概述 /217
13.1.1 理解過渡與動畫 /217
13.1.2 【實戰】基于class的動畫 /219
13.1.3 【實戰】與style綁定的過渡 /222
13.2 考慮性能 /224
13.2.1 避免觸發重繪 /224
13.2.2 利用硬件加速 /226
13.3 持續時間（timing） /226
13.3.1 理解timing /226
13.3.2 持續時間的使用原則 /226
13.4 緩慢的運動（easing） /227
13.4.1 理解緩慢的運動 /227
13.4.2 【實戰】緩慢的運動的實例 /227
13.5 過渡 /228
13.5.1 理解過渡 /228
13.5.2 過渡class /231
13.5.3 【實戰】自定義過渡class /232
13.5.4 同時使用過渡和動畫 /233
13.5.5 顯性的過渡持續時間 /233
13.6 列表過渡 /234
13.6.1 理解列表過渡 /234
13.6.2 【實戰】列表過渡的實例 /234

★第14章 組件的復用與組合 /237
14.1 理解混入 /237
14.1.1 【實戰】基本的混入實例 /237
14.1.2 【實戰】混入時的選項合并 /239
14.2 自定義指令 /240
14.2.1 【實戰】自定義指令的實例 /241
14.2.2 了解指令的鉤子函數 /242
14.2.3 【實戰】指令綁定動態參數 /242
14.2.4 【實戰】指令綁定對象字面量 /243
14.3 理解傳入 /244
14.3.1 【實戰】傳入的基本實例 /245
14.3.2 【實戰】＜teleport＞與組件一起使用的實例 /247
14.3.3 【實戰】在同一個目標元素上使用多個傳入 /249

★第15章 渲染函數 /251
15.1 理解渲染函數 /251
15.1.1 【實戰】使用渲染函數render()的實例 /251
15.1.2 DOM樹 /254
15.1.3 虛擬DOM樹 /255
15.2 h()函數 /256
15.2.1 h()函數的參數 /256
15.2.2 【實戰】使用h()函數生成子代VNode /256
15.2.3 VNode必須唯一 /258
15.3 使用JavaScript代替模板功能 /259
15.3.1 【實戰】代替v-if指令和v-for指令的實例 /259
15.3.2 【實戰】代替v-model指令的實例 /261
15.3.3 【實戰】代替v-on指令的實例 /262
15.3.4 代替插槽 /262
15.4 模板編譯 /263

★第16章 測試 /264
16.1 測試概述 /264
16.1.1 傳統的測試技術所面臨的問題 /264
16.1.2 如何破解測試技術面臨的問題 /266
16.1.3 測試類型 /267
16.2 單元測試 /269
16.2.1 理解單元測試 /269
16.2.2 單元測試常用框架 /270
16.2.3 【實戰】Mocha單元測試的實例 /270
16.3 組件測試 /274
16.3.1 理解組件測試 /274
16.3.2 組件測試常用框架 /274
16.4 端到端測試 /275
16.4.1 理解端到端測試 /275
16.4.2 端到端測試常用框架 /276

★第17章 響應式編程——以聲明式的方式去適應變化 /277
17.1 響應式概述 /277
17.1.1 什么是響應式 /277
17.1.2 如何追蹤變化 /278
17.1.3 了解Proxy對象 /278
17.1.4 了解偵聽器實例 /279
17.2 理解Vue.js響應式編程的原理 /279
17.2.1 聲明響應式狀態 /279
17.2.2 【實戰】ref()方法的使用 /280
17.2.3 響應式狀態解構 /282
17.2.4 防止更改響應式對象 /283
17.3 理解響應式計算 /283
17.4 響應式偵聽 /284
17.4.1 watchEffect()方法與watch()方法的異同點 /285
17.4.2 【實戰】使用watchEffect()方法偵聽變化 /285
17.4.3 【實戰】停止使用watchEffect()方法偵聽 /286
17.4.4 【實戰】使用watch()方法偵聽多個數據源 /288
17.4.5 【實戰】使用watch()方法偵聽響應式對象 /290

★第18章 路由——實現網頁之間的跳轉 /292
18.1 路由的概念 /292
18.1.1 鏈接的類型 /292
18.1.2 什么是路由 /293
18.1.3 路由的核心概念 /293
18.1.4 靜態路由和動態路由 /293
18.2 【實戰】創建靜態路由 /293
18.2.1 安裝Vue Router庫 /294
18.2.2 創建待路由的子組件 /294
18.2.3 創建路由 /295
18.2.4 了解路由參數history的兩種模式 /296
18.2.5 使用路由 /296
18.2.6 運行應用 /298
18.3 【實戰】創建動態路由 /299
18.3.1 什么是動態路由 /300
18.3.2 初始化應用 /300
18.3.3 創建待路由的子組件 /300
18.3.4 創建路由 /301
18.3.5 使用路由 /302
18.3.6 運行應用 /304

★★第4篇 項目實戰

★第19章 創建“新聞頭條”客戶端 /308
19.1 應用概述 /308
19.2 需求分析 /308
19.2.1 首頁的需求分析 /308
19.2.2 新聞詳情頁面的需求分析 /309
19.3 架構設計 /310
19.3.1 獲取訪問API的密鑰 /311
19.3.2 了解新聞列表API /312
19.3.3 了解新聞詳情API /314
19.4 【實戰】初始化“新聞頭條”客戶端應用 /316
19.4.1 修改HelloWorld.vue子組件 /317
19.4.2 修改App.vue根組件 /317
19.4.3 運行應用 /318

★第20章 實現“新聞頭條”客戶端首頁 /319
20.1 首頁概述 /319
20.2 需求分析 /320
20.3 架構設計 /320
20.4 【實戰】實現“新聞頭條”客戶端首頁 /321
20.4.1 添加Naive UI /321
20.4.2 創建組件 /322
20.4.3 實現界面原型 /322
20.4.4 查看完整的首頁原型效果 /327

★第21章 實現“新聞頭條”客戶端導航欄 /329
21.1 導航欄概述 /329
21.2 導航欄的需求分析 /329
21.3 導航欄的架構設計 /330
21.4 【實戰】實現“新聞頭條”客戶端的分類查詢 /330
21.4.1 新建新聞分類服務 /330
21.4.2 解析新聞分類API數據 /330
21.4.3 展示新聞分類 /331
21.5 【實戰】實現“新聞頭條”客戶端的新聞列表 /333
21.5.1 引入HTTP客戶端 /333
21.5.2 解析新聞列表API數據 /334
21.5.3 解決跨域問題 /335
21.5.4 固定導航欄 /336
21.6 【實戰】實現導航欄與新聞列表組件通信 /338
21.6.1 監聽導航欄的單擊事件 /338
21.6.2 自定義導航欄的切換事件 /340
21.6.3 處理導航欄的單擊事件 /341
21.6.4 運行應用 /344

★第22章 實現“新聞頭條”客戶端的新聞詳情頁面 /345
22.1 新聞詳情頁面的概述 /345
22.2 新聞詳情頁面的需求分析 /345
22.3 新聞詳情頁面的架構設計 /346
22.4 【實戰】實現“新聞頭條”客戶端的新聞詳情頁面 /347
22.4.1 創建“新聞頭條”客戶端的新聞詳情組件 /347
22.4.2 修改“新聞頭條”客戶端的新聞列表組件 /349
22.4.3 配置路由 /349
22.4.4 運行應用 /351

參考文獻 /352