第1章 理解Vue.js及其產(chǎn)生的背景 1
1.1 什么是Vue.js 2
1.1.1 為什么使用Vue.js 2
1.1.2 Vue.js的主要特點 3
1.1.3 Vue.js的優(yōu)勢 4
1.2 Vue.js產(chǎn)生的背景 4
1.2.1 傳統(tǒng)的前端開發(fā)模式 5
1.2.2 Vue.js的開發(fā)模式 5
1.2.3 Vue.js與jQuery的區(qū)別 7
1.2.4 Vue.js與React、Angular的比較 8
1.2.5 如何選擇Angular、React和Vue.js 11
1.3 如何學習Vue.js 12
1.3.1 知識儲備 12
1.3.2 學習安排 17
1.4 小結 18
第2章 快速開啟 一個Vue.js應用 19
2.1 開發(fā)環(huán)境準備 20
2.1.1 安裝Node.js 20
2.1.2 設置NPM鏡像 21
2.1.3 選擇合適的IDE 22
2.1.4 安裝Vue CLI 29
2.1.5 檢查和調(diào)試Vue.js應用的工具Vue Devtools 30
2.2 創(chuàng)建Vue.js應用hello-world 32
2.2.1 利用Vue CLI初始化Vue.js應用hello-world 32
2.2.2 運行Vue.js應用hello-world 33
2.3 探索Vue.js應用 35
2.3.1 整體項目結構 35
2.3.2 項目根目錄文件 35
2.3.3 node_modules目錄 36
2.3.4 public目錄 37
2.3.5 src目錄 37
2.4 在Vue.js應用中使用TypeScript 38
2.4.1 基于Vue 3 Preview創(chuàng)建項目 38
2.4.2 基于Manually select features創(chuàng)建項目 39
2.4.3 TypeScript與JavaScript應用的差異 43
2.5 小結 44
第3章 TypeScript基礎 45
3.1 TypeScript概述 46
3.1.1 TypeScript與JavaScript、ECMAScript的關系 46
3.1.2 TypeScript與Vue.js的關系 47
3.1.3 使用TypeScript的優(yōu)勢 48
3.1.4 安裝TypeScript 49
3.1.5 TypeScript代碼的編譯及運行 49
3.2 常量與變量 51
3.2.1 const、let、var三者的作用域 52
3.2.2 常量與變量的區(qū)別 54
3.2.3 變量提升 55
3.3 TypeScript數(shù)據(jù)類型 64
3.3.1 基本類型 65
3.3.2 復雜基礎類型 71
3.3.3 對象類型 74
3.3.4 任意類型 75
3.3.5 聯(lián)合類型 75
3.3.6 交集類型 76
3.4 強大的面向?qū)ο篌w系 76
3.4.1 類 77
3.4.2 接口 78
3.4.3 演示接口的使用 78
3.4.4 泛型 79
3.4.5 演示泛型的使用 79
3.5 TypeScript的命名空間 80
3.5.1 聲明命名空間 80
3.5.2 命名空間體 80
3.5.3 導入聲明 81
3.5.4 導出聲明 81
3.5.5 合并聲明 82
3.6 TypeScript模塊 86
3.6.1 了解模塊 86
3.6.2 導入聲明 87
3.6.3 導入Require聲明 87
3.6.4 導出聲明 88
3.6.5 導出分配 88
3.6.6 了解CommonJS模塊 89
3.6.7 了解AMD模式 91
3.7 裝飾器 91
3.7.1 定義裝飾器 91
3.7.2 了解裝飾器的執(zhí)行時機 91
3.7.3 認識4類裝飾器 93
3.8 小結 93
第4章 Vue.js應用實例 95
4.1 創(chuàng)建應用實例 96
4.1.1 一個應用實例 97
4.1.2 讓應用實例執(zhí)行方法 98
4.1.3 理解選項對象 99
4.1.4 理解根組件 102
4.1.5 理解MVC模型 104
4.1.6 理解MVP模型 105
4.1.7 理解MVVM模型 106
4.2 data property與data methods 107
4.2.1 理解data property 107
4.2.2 理解data methods 108
4.3 Vue.js的生命周期 110
4.3.1 生命周期中的鉤子函數(shù) 110
4.3.2 生命周期的圖示 111
4.3.3 生命周期鉤子函數(shù)的實例 112
4.4 小結 114
第5章 Vue.js組件 115
5.1 組件的基本概念 116
5.1.1 創(chuàng)建和注冊組件的基本步驟 116
5.1.2 理解組件的創(chuàng)建和注冊 117
5.1.3 父組件和子組件 118
5.1.4 DOM模板解析注意事項 119
5.1.5 data必須是函數(shù) 122
5.1.6 組件組合 124
5.1.7 組件注冊 124
5.2 組件通信 126
5.2.1 父組件與子組件通信 126
5.2.2 子組件與父組件通信 129
5.2.3 子組件之間的通信 130
5.2.4 通過插槽分發(fā)內(nèi)容 130
5.3 特殊情況 133
5.4 讓組件可以動態(tài)加載 136
5.5 使用keep-alive緩存組件 137
5.6 小結 139
第6章 Vue.js模板 141
6.1 在模板中使用插值 142
6.1.1 文本 142
6.1.2 原生HTML代碼 143
6.1.3 綁定HTML屬性 145
6.1.4 JavaScript表達式 146
6.2 在模板中使用指令 148
6.2.1 理解指令中的參數(shù) 148
6.2.2 理解指令中的動態(tài)參數(shù) 161
6.2.3 理解指令中的修飾符 163
6.3 在模板中使用指令的縮寫 164
6.3.1 使用v-bind指令的縮寫 165
6.3.2 使用v-on指令的縮寫 166
6.4 綜合實例 167
6.5 小結 172
第7章 Vue.js計算屬性與偵聽器 173
7.1 通過實例理解計算屬性的必要性 174
7.2 聲明計算屬性 176
7.3 計算屬性緩存與方法的關系 177
7.4 計算屬性的注意事項 178
7.4.1 計算函數(shù)不應有副作用 178
7.4.2 避免直接修改計算屬性值 178
7.4.3 計算屬性無法追蹤非響應式依賴 178
7.5 為什么需要偵聽器 179
7.5.1 理解偵聽器 179
7.5.2 一個偵聽器的實例 181
7.6 綜合實例 183
7.7 小結 187
第8章 Vue.js樣式 189
8.1 綁定樣式class 190
8.1.1 在class中綁定字符串 190
8.1.2 在class中綁定對象 191
8.1.3 在class中綁定數(shù)組 192
8.2 綁定內(nèi)聯(lián)樣式 193
8.2.1 在內(nèi)聯(lián)樣式中綁定對象 193
8.2.2 在內(nèi)聯(lián)樣式中綁定數(shù)組 194
8.2.3 在內(nèi)聯(lián)樣式中綁定多重值 195
8.3 綜合實例 196
8.4 小結 198
第9章 Vue.js表達式 199
9.1 Vue表達式的優(yōu)點 200
9.2 條件表達式 200
9.2.1 v-if指令的實例 201
9.2.2 v-else指令的實例 203
9.2.3 v-else-if指令的實例 204
9.2.4 v-show指令的實例 206
9.2.5 理解v-if指令與v-show指令的關系 207
9.3 for循環(huán)表達式 209
9.3.1 使用v-for指令遍歷數(shù)組 209
9.3.2 使用v-for指令遍歷數(shù)組設置索引 211
9.3.3 使用v-for指令遍歷對象的property名稱 212
9.3.4 數(shù)組過濾 213
9.3.5 使用值的范圍 214
9.4 v-for指令的不同使用場景 214
9.4.1 在