Vue.js 3企業(yè)級應(yīng)用開發(fā)實戰(zhàn)（雙色版）

★★第1篇 初識Vue．js
★第1章 理解Vue．js及產(chǎn)生的背景 /2
1．1 什么是Vue．js /2
1．2 Vue．js產(chǎn)生的背景 /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應(yīng)用 /6
2．1 開發(fā)環(huán)境準備 /6
2．1．1 安裝Node．js和NPM /6
2．1．2 設(shè)置NPM鏡像 /7
2．1．3 選擇合適的IDE /7
2．1．4 安裝Vue CLI /8
2．1．5 檢查和調(diào)試Vue．js應(yīng)用的工具――Vue Devtools /8
2．2 創(chuàng)建Vue．js應(yīng)用“hello-world” /8
2．2．1 利用Vue CLI初始化Vue．js應(yīng)用“hello-world” /9
2．2．2 運行Vue．js應(yīng)用“hello-world” /12
2．3 探索Vue．js應(yīng)用 /13
2．3．1 整體項目結(jié)構(gòu) /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應(yīng)用中使用TypeScript /19
2．4．1 基于“Vue 3 Preview”創(chuàng)建項目 /19
2．4．2 基于“Manually select features”創(chuàng)建項目 /20
2．4．3 TypeScript應(yīng)用的差異 /22
★★第2篇 基礎(chǔ)
★第3章 TypeScript基礎(chǔ) /26
3．1 TypeScript概述 /26
3．1．1 TypeScript與JavaScript、ECMAScript的關(guān)系 /26
3．1．2 TypeScript與Vue．js的關(guān)系 /27
3．1．3 使用TypeScript的優(yōu)勢 /27
3．1．4 安裝TypeScript /28
3．1．5 TypeScript代碼的編譯及運行 /28
3．2 變量與常量 /29
3．2．1 var、let、const三者的作用域 /29
3．2．2 變量與常量的區(qū)別 /29
3．2．3 變量提升 /30
3．3 TypeScript數(shù)據(jù)類型 /31
3．3．1 基本類型 /31
3．3．2 對象類型 /35
3．3．3 任意類型 /35
3．3．4 聯(lián)合類型 /37
3．3．5 交集類型 /37
3．4 強大的面向?qū)ο篌w系 /38
3．4．1 類 /38
3．4．2 接口 /43
3．4．3 【實戰(zhàn)】演示接口的使用 /43
3．4．4 泛型 /44
3．4．5 【實戰(zhàn)】演示泛型的使用 /44
3．4．6 枚舉 /45
3．5 TypeScript的命名空間 /46
3．5．1 聲明命名空間 /46
3．5．2 【實戰(zhàn)】聲明命名空間 /46
3．5．3 命名空間體 /47
3．5．4 導(dǎo)入別名聲明 /47
3．5．5 【實戰(zhàn)】導(dǎo)入別名聲明 /48
3．5．6 導(dǎo)出聲明 /49
3．5．7 合并聲明 /49
3．5．8 【實戰(zhàn)】合并聲明 /49
3．6 TypeScript 模塊 /50
3．6．1 了解模塊 /51
3．6．2 【實戰(zhàn)】導(dǎo)入聲明 /51
3．6．3 【實戰(zhàn)】導(dǎo)入Require聲明 /52
3．6．4 【實戰(zhàn)】導(dǎo)出聲明 /52
3．6．5 【實戰(zhàn)】導(dǎo)出分配 /52
3．6．6 了解CommonJS模塊 /53
3．6．7 了解AMD模式 /54
3．7 裝飾器 /55
3．7．1 定義裝飾器 /55
3．7．2 了解裝飾器的執(zhí)行時機 /56
3．7．3 認識4類裝飾器 /57
★第4章 Vue．js應(yīng)用實例――一切的起點 /63
4．1 創(chuàng)建“應(yīng)用實例” /63
4．1．1 第一個“應(yīng)用實例” /63
4．1．2 讓“應(yīng)用實例”執(zhí)行方法 /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 生命周期中的鉤子函數(shù) /69
4．3．2 生命周期的圖示 /70
4．3．3 【實戰(zhàn)】生命周期鉤子函數(shù)的實例 /71
★第5章 Vue．js組件――獨立的程序單元 /76
5．1 組件的基本概念 /76
5．1．1 【實戰(zhàn)】一個最簡單的Vue．js組件的實例 /76
5．1．2 什么是組件 /78
5．1．3 【實戰(zhàn)】一個子組件的復(fù)用實例 /79
5．1．4 Vue．js組件與Web組件的異同點 /80
5．2 組件的交互方式 /80
5．2．1 【實戰(zhàn)】通過prop向子組件傳遞數(shù)據(jù) /80
5．2．2 【實戰(zhàn)】監(jiān)聽子組件的事件 /81
5．2．3 【實戰(zhàn)】兄弟組件之間的通信 /84
5．2．4 【實戰(zhàn)】通過插槽分發(fā)內(nèi)容 /87
5．3 讓組件可以動態(tài)加載 /90
5．3．1 實現(xiàn)組件動態(tài)加載的步驟 /90
5．3．2 【實戰(zhàn)】動態(tài)組件的實例 /90
5．4 使用＜keep-alive＞緩存組件 /96
5．4．1 【實戰(zhàn)】＜keep-alive＞的例子 /97
5．4．2 ＜keep-alive＞緩存組件的配置詳解 /98
★第6章 Vue．js模板――讓內(nèi)容隨著模板中變量的變化而變化 /101
6．1 了解Vue．js的模板 /101
6．2 【實戰(zhàn)】在模板中使用插值 /102
6．2．1 文本 /102
6．2．2 原生HTML代碼 /103
6．2．3 綁定HTML attribute /104
6．2．4 JavaScript表達式 /104
6．3 【實戰(zhàn)】在模板中使用指令 /105
6．3．1 理解指令中的參數(shù) /106
6．3．2 理解指令中的動態(tài)參數(shù) /107
6．3．3 理解指令中的修飾符 /108
6．4 【實戰(zhàn)】在模板中使用指令的縮寫 /108
6．4．1 使用v-bind指令的縮寫 /108
6．4．2 使用v-on指令的縮寫 /109
6．5 使用模板的一些約定 /109
6．5．1 對動態(tài)參數(shù)值的約定 /109
6．5．2 對動態(tài)參數(shù)表達式的約定 /110
6．5．3 對訪問全局變量的約定 /110
★第7章 Vue．js計算屬性與偵聽器――處理響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯 /111
7．1 通過實例理解“計算屬性”的必要性 /111
7．2 【實戰(zhàn)】一個“計算屬性”的實例 /112
7．2．1 聲明“計算屬性” /112
7．2．2 模擬數(shù)據(jù)更改 /114
7．3 “計算屬性”緩存與方法的關(guān)系 /114
7．4 為什么需要偵聽器 /115
7．4．1 理解偵聽器 /115
7．4．2 【實戰(zhàn)】一個偵聽器的實例 /116
★第8章 Vue．js樣式――讓應(yīng)用變得好看 /119
8．1 綁定樣式class /119
8．1．1 【實戰(zhàn)】在class中綁定對象 /119
8．1．2 【實戰(zhàn)】在class中綁定數(shù)組 /121
8．1．3 【實戰(zhàn)】在組件上使用class /122
8．2 綁定內(nèi)聯(lián)樣式 /122
8．2．1 【實戰(zhàn)】在內(nèi)聯(lián)樣式中綁定對象 /123
8．2．2 【實戰(zhàn)】在內(nèi)聯(lián)樣式中綁定數(shù)組 /124
8．2．3 【實戰(zhàn)】在內(nèi)聯(lián)樣式中綁定多重值 /124
★第9章 Vue．js表達式――根據(jù)條件來渲染不同的內(nèi)容 /126
9．1 條件表達式 /126
9．1．1 【實戰(zhàn)】v-if指令的實例 /126
9．1．2 【實戰(zhàn)】v-else指令的實例 /127
9．1．3 【實戰(zhàn)】v-else-if指令的實例 /127
9．1．4 【實戰(zhàn)】v-show指令的實例 /128
9．1．5 理解v-if指令與v-show指令的關(guān)系 /128
9．2 for循環(huán)表達式 /129
9．2．1 【實戰(zhàn)】使用v-for指令遍歷數(shù)組 /129
9．2．2 【實戰(zhàn)】使用v-for指令遍歷數(shù)組設(shè)置索引 /131
9．2．3 【實戰(zhàn)】使用v-for指令遍歷對象的property名稱 /132
9．2．4 【實戰(zhàn)】數(shù)組過濾 /135
9．2．5 【實戰(zhàn)】使用值的范圍 /136
9．3 v-for指令的不同使用場景 /137
9．3．1 【實戰(zhàn)】在＜template＞中使用v-for指令 /137
9．3．2 【實戰(zhàn)】v-for指令與v-if指令一起使用 /138
9．3．3 【實戰(zhàn)】在組件上使用v-for指令 /139
★第10章 Vue．js事件――通知做事的狀態(tài) /142
10．1 什么是事件 /142
10．1．1 【實戰(zhàn)】一個簡單的監(jiān)聽事件實例 /142
10．1．2 理解事件的處理方法 /143
10．1．3 處理原始的DOM事件 /144
10．1．4 為什么需要在HTML代碼中監(jiān)聽事件 /145
10．2 【實戰(zhàn)】多事件處理器的實例 /146
10．3 事件修飾符 /147
10．3．1 什么是事件修飾符 /147
10．3．2 按鍵修飾符 /149
10．3．3 系統(tǒng)修飾符 /149
★第11章 Vue．js表單――采集用戶輸入的數(shù)據(jù) /151
11．1 理解“表單輸入綁定” /151
11．2 【實戰(zhàn)】“表單輸入綁定”的基礎(chǔ)用法 /152
11．2．1 文本 /152
11．2．2 多行文本 /153
11．2．3 復(fù)選框 /153
11．2．4 單選按鈕 /155
11．2．5 選擇框 /156
11．3 【實戰(zhàn)】對表單進行值綁定 /157
11．3．1 復(fù)選框 /157
11．3．2 單選按鈕 /158
11．3．3 選擇框 /160
11．4 【實戰(zhàn)】表單修飾符的使用 /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 【實戰(zhàn)】一個局部注冊的實例 /170
12．4 【實戰(zhàn)】一個模板引用的實例 /171
12．5 深入介紹prop（輸入屬性） /173
12．5．1 理解prop /173
12．5．2 prop類型 /174
12．5．3 【實戰(zhàn)】傳遞動態(tài)prop /175
12．5．4 【實戰(zhàn)】傳遞動態(tài)prop數(shù)字 /176
12．5．5 【實戰(zhàn)】傳遞動態(tài)prop布爾值 /178
12．5．6 【實戰(zhàn)】傳遞動態(tài)prop數(shù)組 /179
12．5．7 【實戰(zhàn)】傳遞動態(tài)prop對象 /181
12．5．8 【實戰(zhàn)】傳遞動態(tài)prop對象中的所有property /182
12．5．9 理解單向下行綁定 /185
12．5．10 【實戰(zhàn)】prop類型驗證 /186
12．6 理解非prop的attribute /189
12．6．1 【實戰(zhàn)】attribute繼承 /189
12．6．2 【實戰(zhàn)】禁用attribute繼承 /191
12．6．3 【實戰(zhàn)】多個根節(jié)點上的attribute繼承 /192
12．7 自定義事件 /195
12．7．1 如何給事件命名 /196
12．7．2 【實戰(zhàn)】一個自定義事件的實例 /196
12．8 深入介紹插槽 /199
12．8．1 理解插槽內(nèi)容 /199
12．8．2 了解渲染作用域 /200
12．8．3 【實戰(zhàn)】后備內(nèi)容（默認內(nèi)容）的實例 /201
12．8．4 【實戰(zhàn)】具名插槽（帶名字的插槽）的實例 /204
12．8．5 了解具名插槽的縮寫 /209
12．9 理解“依賴注入” /210
12．9．1 “依賴注入”的優(yōu)點 /210
12．9．2 【實戰(zhàn)】“依賴注入”的實例 /211
12．10 【實戰(zhàn)】異步組件的實例 /215
★第13章 深入樣式 /217
13．1 過渡與動畫的概述 /217
13．1．1 理解過渡與動畫 /217
13．1．2 【實戰(zhàn)】基于class的動畫 /219
13．1．3 【實戰(zhàn)】與style綁定的過渡 /222
13．2 考慮性能 /224
13．2．1 避免觸發(fā)重繪 /224
13．2．2 利用硬件加速 /226
13．3 持續(xù)時間（timing） /226
13．3．1 理解timing /226
13．3．2 持續(xù)時間的使用原則 /226
13．4 緩慢的運動（easing） /227
13．4．1 理解緩慢的運動 /227
13．4．2 【實戰(zhàn)】緩慢的運動的實例 /227
13．5 過渡 /228
13．5．1 理解過渡 /228
13．5．2 過渡class /231
13．5．3 【實戰(zhàn)】自定義過渡class /232
13．5．4 同時使用過渡和動畫 /233
13．5．5 顯性的過渡持續(xù)時間 /233
13．6 列表過渡 /234
13．6．1 理解列表過渡 /234
13．6．2 【實戰(zhàn)】列表過渡的實例 /234
★第14章 組件的復(fù)用與組合 /237
14．1 理解混入 /237
14．1．1 【實戰(zhàn)】基本的混入實例 /237
14．1．2 【實戰(zhàn)】混入時的選項合并 /239
14．2 自定義指令 /240
14．2．1 【實戰(zhàn)】自定義指令的實例 /241
14．2．2 了解指令的鉤子函數(shù) /242
14．2．3 【實戰(zhàn)】指令綁定動態(tài)參數(shù) /242
14．2．4 【實戰(zhàn)】指令綁定對象字面量 /243
14．3 理解傳入 /244
14．3．1 【實戰(zhàn)】傳入的基本實例 /245
14．3．2 【實戰(zhàn)】＜teleport＞與組件一起使用的實例 /247
14．3．3 【實戰(zhàn)】在同一個目標元素上使用多個傳入 /249
★第15章 渲染函數(shù) /251
15．1 理解渲染函數(shù) /251
15．1．1 【實戰(zhàn)】使用渲染函數(shù)render()的實例 /251
15．1．2 DOM樹 /254
15．1．3 虛擬DOM樹 /255
15．2 h()函數(shù) /256
15．2．1 h()函數(shù)的參數(shù) /256
15．2．2 【實戰(zhàn)】使用h()函數(shù)生成子代VNode /256
15．2．3 VNode必須唯一 /258
15．3 使用JavaScript代替模板功能 /259
15．3．1 【實戰(zhàn)】代替v-if指令和v-for指令的實例 /259
15．3．2 【實戰(zhàn)】代替v-model指令的實例 /261
15．3．3 【實戰(zhàn)】代替v-on指令的實例 /262
15．3．4 代替插槽 /262
15．4 模板編譯 /263
★第16章 測試 /264
16．1 測試概述 /264
16．1．1 傳統(tǒng)的測試技術(shù)所面臨的問題 /264
16．1．2 如何破解測試技術(shù)面臨的問題 /266
16．1．3 測試類型 /267
16．2 單元測試 /269
16．2．1 理解單元測試 /269
16．2．2 單元測試常用框架 /270
16．2．3 【實戰(zhàn)】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章 響應(yīng)式編程――以聲明式的方式去適應(yīng)變化 /277
17．1 響應(yīng)式概述 /277
17．1．1 什么是響應(yīng)式 /277
17．1．2 如何追蹤變化 /278
17．1．3 了解Proxy對象 /278
17．1．4 了解偵聽器實例 /279
17．2 理解Vue．js響應(yīng)式編程的原理 /279
17．2．1 聲明響應(yīng)式狀態(tài) /279
17．2．2 【實戰(zhàn)】ref()方法的使用 /280
17．2．3 響應(yīng)式狀態(tài)解構(gòu) /282
17．2．4 防止更改響應(yīng)式對象 /283
17．3 理解響應(yīng)式計算 /283
17．4 響應(yīng)式偵聽 /284
17．4．1 watchEffect()方法與watch()方法的異同點 /285
17．4．2 【實戰(zhàn)】使用watchEffect()方法偵聽變化 /285
17．4．3 【實戰(zhàn)】停止使用watchEffect()方法偵聽 /286
17．4．4 【實戰(zhàn)】使用watch()方法偵聽多個數(shù)據(jù)源 /288
17．4．5 【實戰(zhàn)】使用watch()方法偵聽響應(yīng)式對象 /290
★第18章 路由――實現(xiàn)網(wǎng)頁之間的跳轉(zhuǎn) /292
18．1 路由的概念 /292
18．1．1 鏈接的類型 /292
18．1．2 什么是路由 /293
18．1．3 路由的核心概念 /293
18．1．4 靜態(tài)路由和動態(tài)路由 /293
18．2 【實戰(zhàn)】創(chuàng)建靜態(tài)路由 /293
18．2．1 安裝Vue Router庫 /294
18．2．2 創(chuàng)建待路由的子組件 /294
18．2．3 創(chuàng)建路由 /295
18．2．4 了解路由參數(shù)history的兩種模式 /296
18．2．5 使用路由 /296
18．2．6 運行應(yīng)用 /298
18．3 【實戰(zhàn)】創(chuàng)建動態(tài)路由 /299
18．3．1 什么是動態(tài)路由 /300
18．3．2 初始化應(yīng)用 /300
18．3．3 創(chuàng)建待路由的子組件 /300
18．3．4 創(chuàng)建路由 /301
18．3．5 使用路由 /302
18．3．6 運行應(yīng)用 /304
★★第4篇 項目實戰(zhàn)
★第19章 創(chuàng)建“新聞頭條”客戶端 /308
19．1 應(yīng)用概述 /308
19．2 需求分析 /308
19．2．1 首頁的需求分析 /308
19．2．2 新聞詳情頁面的需求分析 /309
19．3 架構(gòu)設(shè)計 /310
19．3．1 獲取訪問API的密鑰 /311
19．3．2 了解新聞列表API /312
19．3．3 了解新聞詳情API /314
19．4 【實戰(zhàn)】初始化“新聞頭條”客戶端應(yīng)用 /316
19．4．1 修改HelloWorld．vue子組件 /317
19．4．2 修改App．vue根組件 /317
19．4．3 運行應(yīng)用 /318
★第20章 實現(xiàn)“新聞頭條”客戶端首頁 /319
20．1 首頁概述 /319
20．2 需求分析 /320
20．3 架構(gòu)設(shè)計 /320
20．4 【實戰(zhàn)】實現(xiàn)“新聞頭條”客戶端首頁 /321
20．4．1 添加Naive UI /321
20．4．2 創(chuàng)建組件 /322
20．4．3 實現(xiàn)界面原型 /322
20．4．4 查看完整的首頁原型效果 /327
★第21章 實現(xiàn)“新聞頭條”客戶端導(dǎo)航欄 /329
21．1 導(dǎo)航欄概述 /329
21．2 導(dǎo)航欄的需求分析 /329
21．3 導(dǎo)航欄的架構(gòu)設(shè)計 /330
21．4 【實戰(zhàn)】實現(xiàn)“新聞頭條”客戶端的分類查詢 /330
21．4．1 新建新聞分類服務(wù) /330
21．4．2 解析新聞分類API數(shù)據(jù) /330
21．4．3 展示新聞分類 /331
21．5 【實戰(zhàn)】實現(xiàn)“新聞頭條”客戶端的新聞列表 /333
21．5．1 引入HTTP客戶端 /333
21．5．2 解析新聞列表API數(shù)據(jù) /334
21．5．3 解決跨域問題 /335
21．5．4 固定導(dǎo)航欄 /336
21．6 【實戰(zhàn)】實現(xiàn)導(dǎo)航欄與新聞列表組件通信 /338
21．6．1 監(jiān)聽導(dǎo)航欄的單擊事件 /338
21．6．2 自定義導(dǎo)航欄的切換事件 /340
21．6．3 處理導(dǎo)航欄的單擊事件 /341
21．6．4 運行應(yīng)用 /344
★第22章 實現(xiàn)“新聞頭條”客戶端的新聞詳情頁面 /345
22．1 新聞詳情頁面的概述 /345
22．2 新聞詳情頁面的需求分析 /345
22．3 新聞詳情頁面的架構(gòu)設(shè)計 /346
22．4 【實戰(zhàn)】實現(xiàn)“新聞頭條”客戶端的新聞詳情頁面 /347
22．4．1 創(chuàng)建“新聞頭條”客戶端的新聞詳情組件 /347
22．4．2 修改“新聞頭條”客戶端的新聞列表組件 /349
22．4．3 配置路由 /349
22．4．4 運行應(yīng)用 /351
參考文獻 /352