第1章Vue 3簡介

1.1Web前端框架

1.1.1前端框架的誕生

1.1.2MVC模式

1.1.3從MVC模式到MVVM模式

1.2認識Vue 3

1.2.1什麼是Vue 3

1.2.2Vue 3的優勢

1.3選擇IDE

1.4配置Node.js環境

1.5安裝Vue 3

1.5.1獨立版本安裝

1.5.2CDN方式安裝

1.5.3npm方式安裝

1.5.4使用前端腳手架安裝

1.6熟悉vuedevtools調試工具

1.7本章小結

第2章Hello World與Vue 3的基礎特性

2.1Hello World示例

2.1.1Vue 3應用的核心對像

2.1.2Vue 3的組件結構

2.2Vue 3組件的生命周期

2.2.1認識生命周期

2.2.2鉤子函數

2.3數據綁定

2.3.1文本插值

2.3.2插入原始HTML

2.3.3使用JavaScript表達式

2.4案例

2.4.1利用表單實現簡單登錄頁面

2.4.2利用過濾器過濾指定字符

2.5本章小結

習題

第3章Vue 3基本指令

3.1條件渲染指令

3.1.1vif、velseif、velse

3.1.2vshow

3.1.3vshow與vif的選擇

3.2列表渲染指令vfor

3.2.1基本用法

3.2.2數組更新

3.2.3vfor的其他操作

3.3數據綁定指令vbind

3.3.1參數與屬性綁定

3.3.2動態綁定

3.3.3vbind的縮寫及合並行為

3.4vmodel與表單

3.4.1基本用法

3.4.2值綁定

3.4.3修飾符

3.5方法、計算屬性與監聽屬性

3.5.1Vue 3中的方法

3.5.2計算屬性

3.5.3監聽屬性

3.5.4方法、計算屬性與監聽屬性的區別

3.6事件處理

3.6.1監聽事件von

3.6.2事件處理函數

3.6.3內聯處理函數

3.6.4多事件監聽

3.6.5事件修飾符

3.6.6按鍵修飾符

3.6.7繫統修飾鍵

3.7其他基本指令

3.7.1首次渲染vonce

3.7.2使用vcloak避免渲染時閃爍

3.8自定義指令

3.8.1注冊自定義指令

3.8.2鉤子函數

3.8.3動態指令參數

3.8.4函數簡寫與對像字面量

3.9案例

3.9.1使用自定義指令實現隨機背景色

3.9.2注冊登錄頁面信息

3.10本章小節

習題

第4章組件應用

4.1組件的基礎概念

4.1.1基本使用方法

4.1.2組件復用

4.1.3組織結構

4.1.4鉤子函數

4.2組件間數據傳遞

4.2.1通過props屬性傳遞數據

4.2.2通過總線傳遞數據

4.2.3通過監聽事件傳遞數據

4.3內容分發

4.3.1基本使用方法

4.3.2編譯作用域

4.3.3後備內容

4.3.4具名插槽

4.3.5作用域插槽

4.3.6動態插槽名

4.4其他應用

4.4.1動態組件

4.4.2異步組件

4.5案例

4.5.1實現日歷組件

4.5.2利用組件實現“彈出層”

4.6本章小結

習題

第5章樣式綁定

5.1綁定HTML樣式

5.1.1對像控制樣式

5.1.2數組控制樣式

5.1.3在組件中的應用

5.2綁定內聯樣式

5.2.1對像描述樣式

5.2.2數組描述樣式

5.2.3自動添加前綴

5.2.4多重值樣式

5.3實例：  實現列表的奇偶行不同樣式

5.4本章小結

習題

第6章組件復用

6.1DOM渲染函數實現復用

6.1.1DOM基礎

6.1.2JavaScript動態生成DOM對像

6.1.3引入JSX語法

6.1.4函數式組件

6.1.5模版編譯

6.2混入對像

6.2.1選項合並復用

6.2.2全局混入復用

6.2.3自定義選項合並策略

6.3插件復用

6.3.1編寫插件

6.3.2使用插件

6.4案例：  使用渲染函數渲染列表

6.5本章小結

習題

第7章Vue路由

7.1路由基礎

7.1.1什麼是Vue Router

7.1.2在HTML中使用Vue Router

7.1.3在JavaScript代碼中使用Vue Router

7.2動態路由

7.2.1參數響應

7.2.2捕獲所有路由

7.2.3高級匹配模式和匹配優先級

7.3路由進階使用

7.3.1嵌套路由

7.3.2編程式導航

7.3.3命名路由

7.3.4命名視圖

7.3.5重定向與別名

7.3.6路由組件參數傳遞

7.4history模式

7.4.1HTML 5 History API

7.4.2後端配置

7.5導航守衛

7.5.1全局守衛

7.5.2路由獨享守衛

7.5.3組件內守衛

7.5.4導航解析流程

7.信息

7.7過渡動效

7.7.1單路由過渡

7.7.2路由動態過渡

7.8數據獲取

7.9路由懶加載

7.10滾動行為

7.11本章小結

習題

第8章axios異步請求

8.1axios基礎

8.1.1axios簡介

8.1.2安裝axios

8.1.3基本使用方法

8.2API介紹

8.3適配網絡請求

8.4攔截器介紹

8.5本章小結

習題

第9章Vue CLI部署項目

9.1Vue CLI的簡介

9.1.1什麼是Vue CLI

9.1.2安裝Vue CLI

9.1.3創建Hello World項目

9.1.4了解Vue CLI項目結構

9.2webpack概述

9.2.1了解webpack

9.2.2配置webpack

9.3構建與部署Vue CLI項目

9.4本章小結

習題

第10章Vuex組件狀態管理

10.1Vuex介紹

10.1.1Vuex是什麼

10.1.2Vuex特點

10.2Vuex安裝

10.2.1通過npm或yarn安裝

10.2.2獨立構建

10.3Vuex狀態管理

10.3.1組件中獲取Vuex狀態

10.3.2輔助函數mapState()

10.3.3對像展開運算符

10.4Vuex狀態獲取方法

10.4.1屬性訪問

10.4.2函數訪問

10.4.3輔助函數mapGetters()

10.5Vuex狀態同步更改方法

10.5.1通過提交mutation更改Vuex狀態

10.5.2提交載荷

10.5.3對像風格提交方式

10.6Vuex狀態異步更改方法

10.6.1分發action

10.6.2在組件中分發action

10.6.3組合action

10.7Vuex狀態模塊化管理

10.7.1模塊局部狀態

10.7.2模塊命名空間

10.7.3模塊動態注冊

10.7.4模塊重用

10.8本章小結

習題

第11章紅色旅遊App綜合項目

11.1紅色旅遊App總體規劃

11.2腳手架及項目搭建

11.3第三方依賴的安裝

11.3.1安裝axios

11.3.2安裝Element Plus

11.4首頁功能開發

11.4.1構建統一頭部

11.4.2設計全局菜單

11.4.3廣告輪播組件

11.4.4實現推薦內容列表

11.4.5首頁組件

11.4.6底部導航組件

11.5產品列表頁功能開發

11.6搜索頁面功能開發

11.6.1搜索框組件

11.6.2瀑布流組件改造

11.7產品詳情頁功能開發

11.7.1產品詳情組件

11.7.2用戶評價組件

11.8購物車頁面開發

11.9個人中心頁面的實現

11.10路由配置

11.11項目調試

11.12本章小結

第12章Vue 3項目部署

12.1構建發布版本

12.2部署

12.3本章小結