目录

第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