Vue.js 3 企業級應用開發實戰 (雙色版)

★★第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