Vue 3基礎入門（項目案例·微課視頻·題庫版）（第2版）

王寧  單位：周口師範學院 職務：無 職稱：講師  性別：男 年齡：39歲 專業：計算機科學與技術 研究領域：機器學習、計算機應用 研究成果：主持河南省教育廳教師教育課程改革項目1項，參與河南省科技攻關項目1項，獲得發明專利1項，軟件著作權20余項，參編教材1部。

目錄

第1章Web前端發展與Vue 3簡介

1.1Web前端發展歷史

1.1.1Web前端的誕生與發展

1.1.2動態網頁技術

1.1.3前端框架演進與技術範式疊代

1.2Vue 3框架簡介

1.2.1Vue 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總結

習題1

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

2.1Vue 3實例和創建Hello World應用

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總結

習題2

第3章Vue 3基本指令

3.1條件渲染指令

3.1.1條件渲染vif、velseif、velse

3.1.2條件渲染v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總結

習題3

第4章樣式綁定

4.1綁定HTML樣式

4.1.1對象控制樣式

4.1.2數組控制樣式

4.1.3在組件中的應用

4.2綁定內聯樣式

4.2.1對象描述樣式

4.2.2數組描述樣式

4.2.3自動添加前綴

4.2.4多重值樣式

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

4.4總結

習題4

第5章組件應用

5.1組件的基礎概念

5.1.1基本使用方法

5.1.2組件復用

5.1.3組織結構

5.1.4鉤子函數

5.2組件間的數據傳遞

5.2.1通過props屬性向子組件傳遞數據

5.2.2跨層級組件傳遞數據

5.2.3通過監聽事件向父組件傳遞數據

5.3插槽

5.3.1基本插槽

5.3.2編譯作用域

5.3.3後備內容

5.3.4具名插槽

5.3.5作用域插槽

5.3.6動態插槽名

5.4其他應用

5.4.1動態組件

5.4.2異步組件

5.5案例

5.5.1實現日歷組件

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

5.6總結

習題5

第6章邏輯復用

6.1組合式函數

6.1.1組合式函數的概念

6.1.2使用ref封裝響應式狀態

6.2插件開發

6.2.1插件的概念

6.2.2定義插件

6.2.3註冊插件

6.2.4使用插件

6.3混入

6.3.1混入的概念

6.3.2混入的局限性

6.4渲染函數

6.4.1DOM基礎

6.4.2使用JavaScript生成DOM對象

6.4.3虛擬DOM與渲染函數

6.4.4JavaScript XML

6.4.5函數式組件

6.5案例： 渲染帖子列表

6.6總結

習題6

第7章Vue 3路由

7.1Vue 3路由基礎

7.1.1Vue 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.3.7高級技巧

7.4總結

習題7

第8章axios異步請求

8.1axios基礎

8.1.1axios簡介

8.1.2安裝axios

8.1.3基本使用方法

8.2axios API介紹

8.3適配網絡請求

8.4攔截器介紹

8.5總結

習題8

第9章Vue CLI部署項目

9.1Vue CLI簡介

9.1.1Vue 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總結

習題9

第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提交payload

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總結

習題10

第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總結

習題11

第12章Vue 3項目發布

12.1構建發布版本

12.2部署

12.3總結

習題12