作 者:柳偉衛 著
定 價:109
出 版 社:電子工業出版社
出版日期:2022年01月01日
頁 數:368
裝 幀:平裝
ISBN:9787121426803
"從零開始實現一個完整的企業級“新聞頭條”客戶端應用。1.提供了基於知識點的多個實例2.免費提供書中實例的源文件3.覆蓋的知識面廣4.使用短小的段落和短句,閱讀流暢5.實例的商業性、應用性強"
●第1篇初識Vue.js
第1章理解Vue.js及產生的背景/2
1.1什麼是Vue.js/2
1.2Vue.js產生的背景/2
1.2.1Vue.js與jQuery的不同/2
1.2.2Vue.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安裝VueCLI/8
2.1.5檢查和調試Vue.js應用的工具――VueDevtools/8
2.2創建Vue.js應用“hello-world”/8
2.2.1利用VueCLI初始化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.3node_modules目錄/14
2.3.4public目錄/14
2.3.5src目錄/15
2.4在Vue.js應用中使用TypeScript/19
2.4.1基於“Vue3Preview”創建項目/19
2.4.2基於“Manuallyselectfeatures”創建項目/20
2.4.3TypeScript應用的差異/22
第2篇基礎
第3章TypeScript基礎/26
3.1TypeScript概述/26
3.1.1TypeScript與JavaScript、ECMAScript的關繫/26
3.1.2TypeScript與Vue.js的關繫/27
3.1.3使用TypeScript的優勢/27
3.1.4安裝TypeScript/28
3.1.5TypeScript代碼的編譯及運行/28
3.2變量與常量/29
3.2.1var、let、const三者的作用域/29
3.2.2變量與常量的區別/29
3.2.3變量提升/30
3.3TypeScript數據類型/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.5TypeScript的命名空間/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.6TypeScript模塊/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.2dataproperty與methods/66
4.2.1理解dataproperty/67
4.2.2理解datamethods/67
4.3Vue.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.4Vue.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綁定HTMLattribute/104
6.2.4JavaScript表達式/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.2for循環表達式/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.3v-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.2prop類型/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.2DOM樹/254
15.1.3虛擬DOM樹/255
15.2h()函數/256
15.2.1h()函數的參數/256
15.2.2【實戰】使用h()函數生成子代VNode/256
15.2.3VNode必須專享/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測試/269
16.2.1測試/269
16.2測試常用框架/270
16.2.3【實戰】Moc測試的實例/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.1watchEffect()方法與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安裝VueRouter庫/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添加NaiveUI/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
本書基於Vue.js 3展開,介紹了應用實例、組件、模板、計算屬性、監聽器、指令、表單、事件、數據綁定、路由、依賴注入、自定義樣式、動畫、渲染函數、測試、響應式編程等,還介紹了Vue CLI、TypeScript、Animate.css、Mocha、Vue Router、Naive UI、vue-axios等內容。Vue.js 3接近支持TypeScript,使讀者可以采用類、面向對像的方式進行編程。在本書的最後會手把手帶領讀者一起從零開始實現一個完整的企業級“新聞頭條”客戶端應用。本書技術前瞻、面向實戰、實例豐富。