Vue.js 從入門到精通

第1篇 基礎知識

第1章 初識Vue.js 2

視頻講解：19分鐘

1.1 什麽是Vue.js 2

1.1.1 Vue.js簡介 2

1.1.2 MVVM開發模式 3

1.1.3 Vue.js的特點 3

1.2 安裝Vue.js 4

1.2.1 使用CDN 4

1.2.2 使用NPM 4

1.2.3 使用Vue CLI 5

1.3 Vue.js 3.0的新特性 5

1.4 WebStorm的下載和安裝 6

1.4.1 WebStorm的下載 6

1.4.2 WebStorm的安裝 7

1.5 第一個Vue.js程序 10

1.6 實踐與練習 14

第2章 ECMAScript 6語法介紹 15

視頻講解：74分鐘

2.1 塊級聲明 15

2.1.1 let聲明 16

2.1.2 const聲明 16

2.2 模板字面量 17

2.2.1 多行字符串 17

2.2.2 字符串占位符 17

2.3 默認參數和rest參數 18

2.3.1 默認參數 18

2.3.2 rest參數 18

2.4 解構賦值 20

2.4.1 對象解構 20

2.4.2 數組解構 21

2.5 展開運算符 21

2.6 對象字面量語法擴展 22

2.6.1 對象初始化的簡寫 23

2.6.2 對象方法的簡寫 23

2.6.3 動態屬性名 24

2.7 箭頭函數 24

2.7.1 語法 24

2.7.2 箭頭函數中的this 25

2.8 Promise 26

2.9 類 27

2.9.1 創建類和實例 27

2.9.2 類的構造函數 28

2.9.3 在類中添加方法 29

2.9.4 類的繼承 31

2.9.5 靜態成員 31

2.10 模塊 32

2.10.1 模塊概述 32

2.10.2 ES6中的模塊 33

2.11 實踐與練習 36

第3章 Vue實例與數據綁定 38

視頻講解：36分鐘

3.1 應用程序實例及選項 38

3.1.1 數據 39

3.1.2 方法 39

3.1.3 生命周期鉤子 40

3.2 插值 42

3.2.1 文本插值 42

3.2.2 插入HTML 43

3.2.3 綁定屬性 44

3.2.4 使用表達式 45

3.3 指令 47

3.3.1 參數 47

3.3.2 動態參數 47

3.3.3 修飾符 48

3.4 實踐與練習 48

第4章 條件判斷指令 49

視頻講解：30分鐘

4.1 v-if指令 49

4.1.1 基本用法 49

4.1.2 判斷一組元素 50

4.2 v-else指令 51

4.3 v-else-if指令 53

4.4 v-show指令 55

4.5 如何選擇v-if和v-show 56

4.6 實踐與練習 57

第5章 v-for指令 58

視頻講解：56分鐘

5.1 遍歷數組 58

5.1.1 基本用法 58

5.1.2 循環一組元素 61

5.1.3 更新數組 62

5.2 遍歷對象 65

5.2.1 基本用法 65

5.2.2 向對象中添加響應式屬性 67

5.3 遍歷整數 68

5.4 key屬性 70

5.5 實踐與練習 71

第6章 計算屬性和監聽屬性 72

視頻講解：47分鐘

6.1 計算屬性 72

6.1.1 計算屬性簡介 72

6.1.2 計算屬性的應用 73

6.1.3 計算屬性的getter和setter 74

6.1.4 計算屬性的緩存 77

6.2 監聽屬性 79

6.2.1 監聽屬性簡介 79

6.2.2 監聽屬性的應用 80

6.2.3 監聽對象 81

6.3 計算屬性和監聽屬性的比較 82

6.4 實踐與練習 83

第2篇 核心技術

第7章 元素樣式綁定 86

視頻講解：38分鐘

7.1 class綁定 86

7.1.1 對象語法 86

7.1.2 數組語法 94

7.2 style綁定 96

7.2.1 對象語法 96

7.2.2 數組語法 99

7.3 實踐與練習 101

第8章 事件處理 102

視頻講解：34分鐘

8.1 監聽事件 102

8.2 事件處理方法 103

8.2.1 綁定方法 103

8.2.2 使用事件對象 105

8.2.3 使用內聯語句 107

8.3 修飾符的使用 109

8.3.1 事件修飾符 109

8.3.2 按鍵修飾符 111

8.4 實踐與練習 114

第9章 表單元素綁定 116

視頻講解：95分鐘

9.1 文本框綁定 116

9.1.1 單行文本框 117

9.1.2 多行文本框 119

9.2 復選框綁定 121

9.2.1 單個復選框 121

9.2.2 多個復選框 124

9.3 單選按鈕綁定 125

9.4 下拉列表框綁定 127

9.4.1 單選列表框 127

9.4.2 多選列表框 130

9.5 值綁定 133

9.5.1 單選按鈕 133

9.5.2 復選框 134

9.5.3 下拉列表框 135

9.6 修飾符的使用 136

9.6.1 lazy 136

9.6.2 number 137

9.6.3 trim 137

9.7 實踐與練習 138

第10章 自定義指令 139

視頻講解：16分鐘

10.1 註冊自定義指令 139

10.1.1 全局自定義指令 139

10.1.2 局部自定義指令 140

10.2 鉤子函數 141

10.3 綁定值的類型 145

10.3.1 綁定數值 145

10.3.2 綁定字符串 146

10.3.3 綁定對象字面量 147

10.4 實踐與練習 148

第11章 組件 149

視頻講解：118分鐘

11.1 註冊組件 149

11.1.1 註冊全局組件 150

11.1.2 註冊局部組件 152

11.2 向子組件傳遞數據 153

11.2.1 Prop基本用法 153

11.2.2 數據驗證 160

11.3 監聽子組件事件 163

11.3.1 監聽自定義事件 163

11.3.2 監聽原生事件 166

11.4 插槽的使用 168

11.4.1 基礎用法 168

11.4.2 編譯作用域 169

11.4.3 默認內容 170

11.4.4 命名插槽 171

11.4.5 作用域插槽 174

11.5 混入 178

11.5.1 基礎用法 178

11.5.2 選項合並 179

11.6 動態組件 182

11.6.1 動態組件的用法 182

11.6.2 緩存效果 185

11.7 實踐與練習 190

第12章 組合API 191

視頻講解：31分鐘

12.1 什麽是組合API 191

12.2 setup()函數 192

12.3 響應式API 194

12.3.1 reactive()方法 194

12.3.2 watchEffect()方法 195

12.3.3 ref()方法 195

12.3.4 computed()方法 197

12.3.5 watch()方法 198

12.4 生命周期鉤子函數 200

12.5 使用ref獲取DOM元素 200

12.6 實踐與練習 202

第13章 過渡和動畫效果 203

視頻講解：83分鐘

13.1 單元素過渡 203

13.1.1 CSS過渡 203

13.1.2 過渡的類名 205

13.1.3 自定義過渡的類名 206

13.1.4 CSS動畫 208

13.1.5 使用JavaScript鉤子函數實現動畫 209

13.2 多元素過渡 213

13.2.1 多元素過渡的用法 213

13.2.2 設置元素的key屬性 214

13.2.3 過渡模式的設置 217

13.3 多組件過渡 218

13.4 列表過渡 222

13.5 實踐與練習 224

第14章 渲染函數 226

視頻講解：22分鐘

14.1 什麽是虛擬DOM 226

14.2 render()函數的使用 227

14.2.1 基本用法 227

14.2.2 h()函數 230

14.3 使用JavaScript代替模板功能 233

14.4 實踐與練習 238

第3篇 高級應用

第15章 使用Vue Router實現路由 240

視頻講解：42分鐘

15.1 路由基礎 240

15.1.1 引入Vue Router 241

15.1.2 基本用法 241

15.1.3 動態路由匹配 244

15.1.4 命名路由 245

15.2 編程式導航 245

15.3 嵌套路由 249

15.4 命名視圖 254

15.5 高級用法 257

15.5.1 beforeEach鉤子函數 257

15.5.2 scrollBehavior方法 261

15.6 實踐與練習 263

第16章 使用axios實現Ajax請求 264

視頻講解：33分鐘

16.1 什麽是axios 264

16.2 引入axios 265

16.3 發送get請求 265

16.4 發送post請求 267

16.5 實踐與練習 270

第17章 Vue CLI 272

視頻講解：17分鐘

17.1 Vue CLI簡介 272

17.2 Vue CLI的安裝 273

17.3 創建項目 274

17.3.1 使用vue create命令 274

17.3.2 使用圖形界面 278

17.4 項目結構 279

17.5 編寫一個單文件組件 281

17.6 實踐與練習 283

第18章 狀態管理 285

視頻講解：59分鐘

18.1 什麽是Vuex 285

18.2 Vuex的組成 286

18.3 Vuex的安裝 287

18.4 在項目中使用Vuex 287

18.4.1 創建store 287

18.4.2 定義state 288

18.4.3 定義getter 291

18.4.4 定義mutation 293

18.4.5 定義action 297

18.5 Vuex應用 299

18.6 實踐與練習 304

第4篇 項目開發

第19章 51購商城 308

視頻講解：12分鐘

19.1 項目的設計思路 309

19.1.1 項目概述 309

19.1.2 界面預覽 309

19.1.3 功能結構 311

19.1.4 業務流程 312

19.1.5 文件夾組織結構 312

19.2 商城主頁 313

19.2.1 主頁的設計 313

19.2.2 頂部區和底部區功能 315

19.2.3 商品分類導航功能 318

19.2.4 輪播圖功能 320

19.2.5 商品推薦功能 324

19.3 商品詳情頁面 327

19.3.1 商品詳情頁面的設計 327

19.3.2 圖片放大鏡效果 328

19.3.3 商品概要功能 330

19.3.4 “猜你喜歡”功能 333

19.3.5 選項卡切換效果 336

19.4 購物車頁面 338

19.4.1 購物車頁面的設計 338

19.4.2 購物車頁面的實現 338

19.5 付款頁面 341

19.5.1 付款頁面的設計 341

19.5.2 付款頁面的實現 342

19.6 註冊和登錄頁面 346

19.6.1 註冊和登錄頁面的設計 346

19.6.2 註冊頁面的實現 347

19.6.3 登錄頁面的實現 350