Vue.js 3.x前端開發技術與實戰（微課視頻·題庫版）

 

 

 

 

目錄

 

掃一掃

 

 

 

源碼下載

 

 

 

 

 

 

 

第1章Vue.js發展概述

 

 

1.1Vue.js簡介

 

1.1.1Vue.js發展簡史

 

1.1.2Vue 3新特性簡介

 

1.2Vue.js生產環境配置

 

1.2.1Vue.js引入方法

 

1.2.2安裝Vue devtools

 

1.2.3Node.js環境配置

 

1.2.4創建第1個Vue單頁

程序

 

1.3Vue.js開發工具

 

1.3.1Visual Studio Code

 

1.3.2HBuilderX

 

1.4ECMAScript 6.0基礎

 

1.4.1let和const

 

1.4.2解構賦值

 

1.4.3箭頭函數

 

1.4.4展開運算符

 

1.4.5模板字符串

 

本章小結

 

練習1

 

項目實戰1

 

第2章Vue.js基礎

 

 

2.1MVVM模式

 

2.1.1MVVM模式簡介

 

2.1.2MVVM模式的前端框架

發展趨勢

 

2.1.3MVVM模式的應用

 

2.2數據綁定與插值

 

2.2.1文本綁定

 

2.2.2HTML代碼綁定

 

2.2.3屬性綁定

 

2.2.4JavaScript表達式

綁定

 

2.3計算屬性與方法

 

2.3.1計算屬性基礎應用

 

2.3.2計算屬性的setter和

getter

 

2.4偵聽屬性watch

 

2.4.1偵聽屬性基本用法

 

2.4.2偵聽屬性高級用法

 

2.5生命周期鉤子函數

 

2.5.1生命周期鉤子函數

作用

 

2.5.2生命周期鉤子函數

應用

 

2.6Vue中數組變動更新

 

2.6.1變異方法

 

2.6.2非變異方法

 

2.7控制台console對象

 

2.7.1顯示信息的命令

 

2.7.2占位符

 

2.7.3分組顯示

 

2.7.4查看對象的信息

 

本章小結

 

練習2

 

項目實戰2

 

第3章Vue.js指令

 

 

3.1條件渲染

 

3.1.1vif/velse/velseif

指令

 

3.1.2Vue 3.x中key值的

應用

 

3.1.3vshow指令

 

3.2列表渲染(vfor指令)

 

3.3類與樣式綁定(vbind

指令)

 

3.4事件處理(von指令)

 

3.5表單輸入綁定(vmodel

指令)

 

3.6vhtml與vtext指令

 

3.7vonce、vcloak、vpre指令

 

3.8Vue.js自定義指令

 

3.8.1自定義指令註冊

 

3.8.2對象字面量

 

本章小結

 

練習3

 

項目實戰3

 

 

 

 

 

第4章Vue 3新特性應用

 

 

4.1響應式基礎

 

4.1.1組件選項setup()

 

4.1.2ref()、reactive()、toRefs()

和toRef()函數

 

4.1.3watch、watchEffect和

computed

 

4.2Vue 3生命周期

 

4.2.1Vue 3生命周期鉤子函數

(組合式API)

 

4.2.2生命周期鉤子函數

應用

 

本章小結

 

練習4

 

項目實戰4

 

第5章Vue.js組件開發

 

 

5.1組件基礎

 

5.1.1組件命名

 

5.1.2組件註冊

 

5.2組件間通信

 

5.2.1父組件向子組件傳值

 

5.2.2子組件向父組件傳值

 

5.2.3父鏈與子組件索引

 

5.3插槽

 

5.3.1匿名插槽

 

5.3.2具名插槽

 

5.3.3作用域插槽

 

5.3.4動態插槽名

 

本章小結

 

練習5

 

項目實戰5

 

第6章Vue.js過渡與動畫

 

 

6.1單元素/組件的過渡

 

6.1.1過渡的類名

 

6.1.2CSS過渡

 

6.1.3CSS動畫

 

6.1.4自定義過渡的類名

 

6.1.5同時使用過渡和動畫

 

6.1.6顯性的過渡持續時間

 

6.1.7JavaScript鉤子

 

6.1.8Velocity動畫庫簡介

 

6.2初始渲染的過渡

 

6.3多個元素的過渡

 

6.4多個組件的過渡

 

6.5列表過渡

 

6.5.1列表的進入/離開

過渡

 

6.5.2列表的排序過渡

 

6.5.3列表的交錯過渡

 

本章小結

 

練習6

 

項目實戰6

 

第7章Vue開發環境與SFC新

特性

 

 

7.1Vue開發環境簡介

 

7.1.1Node.js簡介

 

7.1.2Node.js部署

 

7.2Node包管理器npm

 

7.2.1npm簡介

 

7.2.2npm常用命令

 

7.3webpack打包工具

 

7.3.1webpack簡介

 

7.3.2webpack配置與應用

 

7.3.3webpack配置加載器

 

7.3.4webpack配置開發服

務器

 

7.4Vue CLI

 

7.4.1Vue CLI安裝

 

7.4.2Vue CLI創建Vue

項目

 

7.5單文件組件

 

7.5.1單文件組件的結構

 

7.5.2單文件組件的新特點

 

7.6組合式API： 依賴註入

 

7.7組合式API： 模板引用

 

7.7.1獲取節點

 

7.7.2在組件上使用ref

 

7.8組合式函數

 

7.9模板refs

 

本章小結

 

練習7

 

項目實戰7

 

第8章路由Vue Router

 

 

8.1Vue Router概述

 

8.1.1Vue Router安裝與

使用

 

8.1.2Vue Router基礎

應用

 

8.2Vue Router高級應用

 

8.2.1動態路由匹配

 

8.2.2嵌套路由

 

8.2.3編程式導航

 

8.2.4命名路由

 

8.2.5命名視圖

 

8.2.6重定向和別名

 

8.2.7HTML 5 History 

模式

 

8.2.8路由組件傳參

 

本章小結

 

練習8

 

項目實戰8

 

第9章狀態管理Vuex

 

 

9.1Vuex概述

 

9.1.1Vuex定義

 

9.1.2簡單狀態管理——store

模式

 

9.2Vuex基本使用

 

9.3Vuex核心概念

 

9.3.1一個完整的store

結構

 

9.3.2最簡單的store

 

9.3.3Vuex中的state

 

9.3.4Vuex中的getter

 

9.3.5Vuex中的mutation

 

9.3.6Vuex中的action

 

9.3.7Vuex中的module

 

9.4Vuex多模塊實戰案例

 

本章小結

 

練習9

 

項目實戰9

 

第10章Vue 3 UI框架Element 

Plus

 

 

10.1Element Plus概述

 

10.1.1Element Plus安裝與

配置

 

10.1.2Element Plus

導航

 

10.1.3Element Plus快速

開始

 

10.1.4Element Plus全局

配置

 

10.2Element Plus組件

 

10.3Element Plus組件

應用

 

10.3.1Basic基礎組件——

Container佈局

容器

 

10.3.2Basic基礎組件——

Layout 佈局

 

10.3.3配置組件——Config 

Provider全局配置

 

10.3.4Form表單組件

 

10.3.5Data數據展示組件——

Avatar、Badge、Calendar、

Card、Carousel

 

10.3.6Data數據展示組件——

Table表格

 

10.3.7Data數據展示組件——

Virtualized Table

虛擬化表格

 

10.3.8Navigation導航

組件

 

本章小結

 

練習10

 

項目實戰10

 

第11章Vue 3.x構建工具Vite

 

 

11.1Vite創建項目

 

11.1.1Vite簡介

 

11.1.2創建第1個 Vite 

項目

 

11.2Vite創建“惠民早點”

項目

 

11.2.1創建默認項目

 

11.2.2更新完善項目

 

本章小結

 

練習11

 

項目實戰11

 

第12章網絡請求庫Axios與JSON 

Server

 

 

12.1Axios概述

 

12.1.1Axios簡介

 

12.1.2Axios特性

 

12.1.3Axios應用

 

12.2Axios舉例

 

12.2.1執行get請求

 

12.2.2執行post請求

 

12.2.3一次執行多個

請求

 

12.3JSON Server與

Postman

 

12.3.1JSON Server

簡介

 

12.3.2JSON Server

應用

 

12.3.3接口測試工具

Postman

 

12.4跨域請求數據

 

12.4.1Vue CLI創建項目跨域

配置

 

12.4.2Vite創建項目跨域

配置

 

12.5Axios API

 

12.5.1通過配置(config)發送

請求

 

12.5.2請求方式的別名

 

12.5.3請求配置

 

12.5.4Axios實例

 

12.6Axios攔截器

 

12.7Axios應用實戰

 

12.7.1請求本地JSON

數據

 

12.7.2請求遠程天氣預報

數據

 

本章小結

 

練習12

 

項目實戰12

 

第13章Vue 3+Element Plus實戰

——簡易圖書管理系統

 

 

13.1簡易圖書管理系統需求

 

13.1.1簡易圖書管理系統

功能

 

13.1.2簡易圖書管理系統

實現技術

 

13.2簡易圖書管理系統實現

 

13.2.1項目創建

 

13.2.2定義main.js

文件

 

13.2.3修改App.vue

組件

 

13.2.4定義BookView.vue

組件

 

13.2.5定義Header.vue

組件

 

13.2.6定義Footer.vue

組件

 

13.2.7定義router/index.js

文件

 

13.2.8定義store/index.js

文件

 

13.2.9定義HomeView.vue

組件

 

13.2.10定義SettingView.vue

組件

 

13.2.11定義AboutView.vue

組件

 

 

13.2.12定義BookAdd.vue

組件

 

 

13.2.13定義BookModify.vue

組件

 

13.2.14定義BookQuery.vue

組件

 

本章小結

 

練習13

 

項目實戰13

 

參考文獻