本书详细介绍渐进式框架Vue.js 3.2的最新特性和相关优化改进功能,并将Vue CLI 5、Vuex 4、Vue Router 4、Vite 4、Axios及基于Vue 3的面向设计师和开发者的Element Plus组件库等最新周边生态系统囊括其中,满足Web前端开发者的真实需要。
全书共13章。第1~3章介绍Vue.js发展概述、基础和指令;第4章介绍Vue 3新特性应用;第5章和第6章介绍Vue.js组件开发和过渡与动画;第7章介绍Vue开发环境与SFC新特性;第8章和第9章介绍路由Vue Router和状态管理Vuex;第10章介绍Vue 3 UI框架Element Plus;第11章和第12章介绍Vue 3.x构建工具Vite和网络请求库Axios与JSON Server; 第13章介绍基于Vue 3 Element Plus的简易图书管理系统实战。每章均设计有学习目标、小结、练习与项目实战,便于广大读者和工程技术人员自主学习与实践锻炼,结合项目实战提高编程水平和工程能力。
本书可作为高等学校计算机类专业及理工科其他相关专业软件开发类课程的教材,也可作为IT从业人员、Web前端开发爱好者及网络培训、企业实训的参考用书。
本书详细介绍渐进式框架Vue.js 3.2最新特性和相关优化改进功能,并将Vue CLI 5、Vuex 4、Vue Router 4、Vite 4、Axios及基于Vue 3的面向设计师和开发者的Element Plus组件库等最新周边生态系统囊括其中,满足Web前端开发者的真实需要。
本书特色:
(1)编程风格:从选项式API向组合式API平稳过渡,由易到难,循序渐进。
(2)内容构建:从Vue.js 3.x基础应用到周边生态有机融合,紧扣工程,满足需求。
(3)实战案例:从基础应用到项目实战递进提升,经典适用,层层深入。
随着互联网 的飞速发展,Web前端开发技术也在更新迭代,从最初的HTML静态页面、动态网页发展到富媒体开发,又从MVC模式过渡到MVVM模式,从前后端混合开发到前后端分离开发,各类新技术层出不穷。
Web前端开发仅采用HTML、CSS、JavaScript三大技术开发项目已经无法满足用户对页面的动态、实时、交互功能的需要,迫切需要采用新框架技术改善用户的访问体验,实现数据、信息快速呈现。目前出现的许多主流前端开发框架可以大大地提升Web前端项目开发速度和质量,降低开发成本,满足快速交付的需要。这些主流前端开发框架主要包括React、Angular和Vue.js。Vue.js 是前后端分离开发的主流技术之一,它是一套构建用户界面的渐进式框架,以数据驱动视图和组件化的思想构建,采用自底向上、增量开发的设计,其核心库只关注视图层。与React、Angular相比,Vue.js在可读性、可维护性和趣味性之间做到了很好的平衡,非常适合中小型项目的快速开发。随着Vue.js 3.x的推出,用户已经可以使用其开发大型项目。
1. 主要内容
本书共13章。第1章为Vue.js发展概述; 第2章为Vue.js基础; 第3章为Vue.js指令; 第4章为Vue 3新特性应用; 第5章为Vue.js组件开发; 第6章为Vue.js过渡与动画; 第7章为Vue开发环境与SFC新特性; 第8章为路由Vue Router; 第9章为状态管理Vuex; 第10章为Vue 3 UI框架Element Plus; 第11章为Vue 3.x构建工具Vite; 第12章为网络请求库Axios与JSON Server; 第13章为Vue 3 Element Plus实战简易图书管理系统。
2. 编写特色
有机融入周边生态系统,实用性强。及时将新发布的Vue.js 3.2新特性和新应用写入本书,同时将下一代前端开发与构建工具Vite、Axios、基于Vue 3 UI框架的Element Plus一起整合进来。融入Vue 3集成的Vuex 4和Vue Router 4,能够满足快捷、高效的单页应用开发的需要。
精心遴选工程实战案例,通用性强。从不同行业领域遴选真实的应用场景,依托知识点和技能点要求设计案例。案例由浅入深,循序渐进,易学通用。
合理规划知识框架结构,可读性强。每章规划了本章学习目标、教学内容、本章小结、练习与项目实战。以简易HTML文件构建为基础,逐步向工程化工具构建项目过渡;以Vue 3.0中使用Options API开发项目为基础,逐步向Vue 3.2中使用Composition API开发项目过渡。这样的学习线路能够适应大多数读者的需要,可读性强,容易掌握并灵活运用。
3. 教学资源
为了使读者能够更好地掌握本书内容,笔者录制了项目实战教学视频,总时长800分钟,帮助读者学习和消化所学知识,提高实践技能。本书还提供了大量的配套资源,包括教学大纲、教学课件、电子教案、程序源码、在线题库、习题答案和教学进度表。
资源下载提示
课件等资源: 扫描封底的课件下载二维码,在公众号书圈下载。
素材(源码)等资源: 扫描目录上方的二维码下载。
在线作业: 扫描封底的作业系统二维码,登录网站在线做题及查看答案。
微课视频: 扫描封底的文泉云盘防盗码,再扫描书中相应章节的视频讲解二维码,可以在线学习。
本书的出版得到清华大学出版社相关人员的大力支持与合作,在此谨表示衷心感谢。
由于Web前端框架技术发展迅速,新特性和功能不断增加,加之时间紧、任务重、能力有限,书中疏漏在所难免,恳请各位技术专家和读者朋友批评指正。
储久良2024年1月于苏州虎丘
扫一扫
源码下载
第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.1vif/velse/velseif
指令
3.1.2Vue 3.x中key值的
应用
3.1.3vshow指令
3.2列表渲染(vfor指令)
3.3类与样式绑定(vbind
指令)
3.4事件处理(von指令)
3.5表单输入绑定(vmodel
指令)
3.6vhtml与vtext指令
3.7vonce、vcloak、vpre指令
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
参考文献