【图书推荐】《Vue.js 3.x+Element Plus从入门到精通(视频教学版)》

本书用处

内容简介

本书通过对Vue.js(简称Vue)的示例和综合案例的介绍与演练,使读者快速掌握Vue.js 3.x框架的用法,提高Web前端的实战开发能力。本书配套示例源码、PPT课件、教学大纲、教案、同步教学视频、习题及答案、其他资源、作者微信群答疑服务。

本书共分15章,内容包括Vue.js 3.x的基本概念、Vue.js模板应用、组件的方法和计算属性、表单的双向绑定、处理用户交互、精通组件和组合API、虚拟DOM和Render()函数、玩转动画效果、熟练使用构建工具Vue CLI和Vite、基于Vue 3的UI组件库Element Plus、网络通信框架axios、使用Vue Router进行路由管理、状态管理框架Vuex、基于Vue的网上商城系统实战,以及基于Element Plus的图书借阅系统实战。

适合读者

对Vue.js框架的初学者而言,是一本简明易懂的Vue入门书和工具书。

对从事Web前端开发的读者来说,也是一本难得的参考手册。

本书也适合作为高等院校或高职高专前端开发相关课程的教材。

作者简介

张工厂,郑州某软件公司技术副总,技术主攻方向为PHP、MySQL与Web前端技术,在Web应用开发、数据库管理方面具有丰富的实战经验。著有图书:《PHP 8从入门到精通(视频教学版)》《MySQL 5.7从入门到精通(视频教学版)(第2版)》《PHP 7+MySQL 8动态网站开发从入门到精通(视频教学版)》《HTML5+CSS3+jQuery Mobile+Bootstrap开发APP从入门到精通(视频教学版)》。

前言

Vue.js(简称Vue)是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计。Vue.js的核心库只关注视图层,并且非常容易学习,与其他库或已有项目整合也非常方便,所以Vue.js能够在很大程度上降低Web前端开发的难度,因此深受广大Web前端开发人员的喜爱。

本书内容

本书共分15章,内容包括Vue.js 3.x的基本概念、Vue.js模板应用、组件的方法和计算属性、表单的双向绑定、处理用户交互、精通组件和组合API、虚拟DOM和Render()函数、玩转动画效果、熟练使用构建工具Vue CLI和Vite、基于Vue 3的UI组件库Element Plus、网络通信框架axios、使用Vue Router进行路由管理、状态管理框架Vuex。最后讲解基于Vue的网上商城系统开发和基于Element Plus的图书借阅系统开发,帮助读者进一步巩固和积累Vue.js项目的开发  经验。 

本书特色

系统全面:讲解由浅入深,涵盖所有Vue.js 3.x的知识点,便于读者循序渐进地掌握Vue前端开发技术。

注重操作:注重操作,图文并茂,在介绍示例的过程中,每个操作均有对应的插图。这种图文结合的方式,使读者在学习过程中能够直观、清晰地看到操作的过程以及效果,便于快速理解和掌握。

案例丰富:把知识点融汇于系统的示例中,并且结合综合案例进行拓展,让读者达到“知其然,并知其所以然”的效果。

疑难提示:本书对读者在学习过程中可能会遇到的疑难问题,以“提示”的形式进行说明,避免读者在学习的过程中走弯路。

作者答疑:本书作者提供微信群答疑服务,读者在阅读过程中有疑问和问题,均可通过微信群或微信直接联系作者,并可在微信群中相互交流。

丰富的配套资源下载

本书配套资源包括示例源码、PPT课件、同步教学视频、教学大纲、教案、习题与答案、Vue.js 3.x常见错误及解决方法、就业面试题及解答、Vue.js 3.x开发经验及技巧汇总、作者微信群答疑服务等,读者需要用微信扫描下面的二维码获取。

本书适合的读者

  • Vue前端开发初学者
  • Vue前端开发人员
  • Element Plus前端开发人员
  • Web应用开发人员
  • 高等院校或高职高专Web前端开发课程的学生

鸣谢

本书作者除了封面署名的张工厂,还有刘增杰和王英英,在此对他们作出的贡献表示感谢。同时,还要感谢清华大学出版社所有老师对本书出版所付出的努力。

作   者

2024年1月

目录

目    录
第 1 章  流行的前端开发框架Vue.js 1
1.1  前端开发技术的发展 1
1.2  熟悉MV*模式 2
1.2.1  MVC模式 2
1.2.2  MVVM模式 2
1.3  Vue.js概述 3
1.3.1  Vue.js“组件化”思想 3
1.3.2  Vue.js的发展历程 4
1.3.3  Vue.js 3.4的特性 5
1.4  安装Vue.js 3.x 6
1.4.1  使用CDN方式 6
1.4.2  NPM 6
1.4.3  命令行工具 7
1.4.4  使用Vite方式 7
1.5  案例实战——使用Vue.js框架 8
1.6  Vue.js 3.x的新变化 9
第 2 章  Vue.js模板应用 12
2.1  模板插值 12
2.1.1  文本插值 12
2.1.2  原始HTML 13
2.1.3  使用JavaScript表达式 14
2.2  常用的内置模板指令 15
2.2.1  v-on 16
2.2.2  v-text 17
2.2.3  v-once 18
2.2.4  v-pre 18
2.2.5  v-cloak 19
2.3  条件渲染 20
2.3.1  v-if/v-else-if/v-else 20
2.3.2  使用v-show指令进行条件渲染 22
2.4  使用v-for指令进行循环渲染 23
2.5  案例实战1——通过插值语法实现姓名组合 35
2.6  案例实战2——通过指令实现下拉菜单效果 36
第 3 章  组件的方法和计算属性 39
3.1  方法选项 39
3.1.1  使用方法 39
3.1.2  传递参数 41
3.1.3  方法之间的调用 42
3.2  使用计算属性 43
3.3  计算属性的get和set方法 44
3.4  计算属性的缓存 46
3.5  使用计算属性代替v-for和v-if 49
3.6  绑定HTML样式(class) 51
3.6.1  数组语法 51
3.6.2  对象语法 53
3.6.3  在组件上使用class属性 56
3.7  绑定内联样式(style) 57
3.7.1  对象语法 57
3.7.2  数组语法 59
3.8  案例实战1——设计隔行变色的商品表 60
3.9  案例实战2——使用计算属性设计购物车效果 63
第 4 章  表单的双向绑定 66
4.1  实现双向数据绑定 66
4.2  单行文本输入框 66
4.3  多行文本输入框 67
4.4  复选框 68
4.5  单选按钮 70
4.6  选择框 71
4.7  值绑定 74
4.7.1  复选框 74
4.7.2  单选框 75
4.7.3  选择框的选项 75
4.8  修饰符 76
4.8.1  lazy 76
4.8.2  number 77
4.8.3  trim 78
4.9  案例实战——设计用户注册页面 79
第 5 章  处理用户交互 81
5.1  监听事件 81
5.2  事件处理方法 82
5.3  事件修饰符 86
5.3.1  stop 86
5.3.2  capture 88
5.3.3  self 90
5.3.4  once 92
5.3.5  prevent 93
5.3.6  passive 94
5.4  按键修饰符 94
5.5  系统修饰键 96
5.6  使用监听器 97
5.7  监听方法 99
5.8  监听对象 100
5.9  案例实战1——使用监听器设计购物车效果 103
5.10  案例实战2——处理用户注册信息 105
第 6 章  精通组件和组合API 107
6.1  组件是什么 107
6.2  组件的注册 107
6.2.1  全局注册 108
6.2.2  局部注册 109
6.3  使用prop向子组件传递数据 110
6.3.1  prop的基本用法 110
6.3.2  单向数据流 113
6.3.3  prop验证 114
6.3.4  非prop的属性 116
6.4  子组件向父组件传递数据 117
6.4.1  监听子组件事件 118
6.4.2  将原生事件绑定到组件 119
6.4.3  .sync修饰符 121
6.5  插槽 123
6.5.1  插槽的基本用法 123
6.5.2  编译作用域 123
6.5.3  默认内容 124
6.5.4  命名插槽 125
6.5.5  作用域插槽 128
6.5.6  解构插槽prop 130
6.6  Vue.js 3.x的新变化1——组合API 131
6.7  setup()函数 131
6.8  响应式API 133
6.8.1  reactive()方法和watchEffect()方法 133
6.8.2  ref()方法 134
6.8.3  readonly()方法 135
6.8.4  computed()方法 135
6.8.5  watch()方法 136
6.9  Vue.js 3.x的新变化2——访问组件的方式 137
6.10  案例实战——使用组件创建树状项目分类 138
第 7 章  虚拟DOM和render()函数 140
7.1  虚拟DOM 140
7.2  render()函数 141
7.3  创建组件的VNode 144
7.4  使用JavaScript代替模板功能 145
7.4.1  v-if和v-for 145
7.4.2  v-on 146
7.4.3  事件和按键修饰符 146
7.4.4  插槽 147
7.5  函数式组件 149
7.6  JSX 149
7.7  案例实战——设计商品采购信息列表 150
第 8 章  玩转动画效果 153
8.1  单元素/组件的过渡 153
8.1.1  CSS过渡 153
8.1.2  过渡的类名 155
8.1.3  CSS动画 158
8.1.4  自定义过渡的类名 159
8.1.5  动画的JavaScript钩子函数 160
8.2  初始渲染的过渡 164
8.3  多个元素的过渡 165
8.4  列表过渡 166
8.4.1  列表的进入/离开过渡 167
8.4.2  列表的排序过渡 168
8.4.3  列表的交错过渡 169
8.5  案例实战1——商品编号增加器 171
8.6  案例实战2——设计下拉菜单的过渡动画 173
第 9 章  熟练使用构建工具Vue CLI和Vite 175
9.1  脚手架的组件 175
9.2  脚手架环境搭建 176
9.3  安装脚手架 179
9.4  创建项目 180
9.4.1  使用命令 180
9.4.2  使用图形化界面 182
9.5  分析项目结构 186
9.6  配置Sass、Less和Stylus 188
9.7  配置文件package.json 190
9.8  Vue.js 3.x新增开发构建工具——Vite 191
第 10 章  基于Vue 3的UI组件库Element Plus 194
10.1  Element Plus的安装与使用 194
10.2  基本组件 196
10.2.1  按钮组件 196
10.2.2  文字链接组件 198
10.2.3  间距组件 198
10.3  页面布局 201
10.3.1  创建页面基础布局 201
10.3.2  布局容器 203
10.4  表单类组件 205
10.4.1  单选框 205
10.4.2  复选框 206
10.4.3  标准输入框组件 208
10.4.4  带推荐列表的输入框组件 210
10.4.5  数字输入框 212
10.4.6  选择列表 213
10.4.7  多级列表组件 216
10.5  开关与滑块组件 218
10.5.1  开关组件 218
10.5.2  滑块组件 219
10.6  选择器组件 221
10.6.1  时间选择器 221
10.6.2  日期选择器 223
10.6.3  颜色选择器 224
10.7  提示类组件 225
10.7.1  警告组件 225
10.7.2  通知组件 227
10.7.3  消息提示组件 228
10.8  数据承载相关组件 229
10.8.1  表格组件 229
10.8.2  导航菜单组件 232
10.8.3  标签页组件 234
10.8.4  标记组件 236
10.8.5  结果组件 237
10.8.6  抽屉组件 238
10.9  案例实战——设计一个商城活动页面 240
第 11 章  网络通信框架axios 244
11.1  什么是axios 244
11.2  安装axios 244
11.3  基本用法 245
11.3.1  axios的get请求和post请求 245
11.3.2  请求同域下的JSON数据 247
11.3.3  跨域请求数据 249
11.3.4  并发请求 250
11.4  axios API 251
11.5  请求配置 251
11.6  创建实例 254
11.7  配置默认选项 254
11.8  拦截器 255
11.9  Vue.js 3.x的新变化——替代Vue.prototype 255
11.10  案例实战——显示近7日的天气情况 256
第 12 章  使用Vue Router进行路由管理 259
12.1  使用Vue Router 259
12.1.1  在HTML页面使用路由 259
12.1.2  在项目中使用路由 264
12.2  命名路由 266
12.3  命名视图 268
12.4  路由传参 272
12.5  编程式导航 277
12.6  组件与Vue Router间解耦 281
12.6.1  布尔模式 281
12.6.2  对象模式 284
12.6.3  函数模式 287
12.7  案例实战——开发网站会员登录页面 290
第 13 章  状态管理框架Vuex 295
13.1  什么是Vuex 295
13.2  安装Vuex 296
13.3  在项目中使用Vuex 297
13.3.1  搭建一个项目 297
13.3.2  state对象 299
13.3.3  getter对象 300
13.3.4  mutation对象 302
13.3.5  action对象 304
13.4  案例实战——设计一个商城购物车页面 306
第 14 章  基于Vue的网上商城系统开发 313
14.1  系统功能模块 313
14.2  使用Vite搭建项目 313
14.3  设计首页 314
14.3.1  页面头部组件 314
14.3.2  网页首页组件 315
14.3.3  网页页脚组件 320
14.4  设计商品详情页面 320
14.5  设计商品分类页面 322
14.6  设计商品结算页面 325
14.7  设计个人信息页面 328
14.8  设计订单信息页面 331
14.9  路由配置 334
14.10  系统的运行 335
第 15 章  基于Element Plus的图书借阅系统开发 336
15.1  使用Vite搭建项目 336
15.2  设计登录页面 338
15.3  设计注册页面 340
15.4  设计首页 341
15.5  设计会员信息页面 344
15.6  设计图书借阅信息页面 349
15.7  设计还书信息页面 351
15.8  系统的运行 353
15.9  系统的调试 353

正版购买

《Vue.js 3.x+Element Plus从入门到精通(视频教学版)(Web前端技术丛书)》(张工厂)【摘要 书评 试读】- 京东图书 (jd.com)

4.56=折非常合适。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/15140.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML+CSS 响应式导航栏

效果演示 Code <div class="navbar"><input type="checkbox"><span></span><span></span><ul><li><a href="#">点赞</a></li><li><a href="#">关注&…

模拟器玩游戏

IOS系统 【PPSSPP与Retroarch 模拟器上架苹果商店&#xff0c;教你如何玩转复古游戏模拟器】 安卓

SpringCloud+Python 混合微服务,如何打造AI分布式业务应用的技术底层?

尼恩&#xff1a;LLM大模型学习圣经PDF的起源 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;经常性的指导小伙伴们改造简历。 经过尼恩的改造之后&#xff0c;很多小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试机会&#x…

【数据结构】数据结构中的隐藏玩法——栈与队列

前言&#xff1a; 哈喽大家好&#xff0c;我是野生的编程萌新&#xff0c;首先感谢大家的观看。数据结构的学习者大多有这样的想法&#xff1a;数据结构很重要&#xff0c;一定要学好&#xff0c;但数据结构比较抽象&#xff0c;有些算法理解起来很困难&#xff0c;学的很累。我…

依赖管理与Springboot Starters

依赖管理与Spring Boot Starters 在现代软件开发过程中&#xff0c;依赖管理是一项至关重要的任务。随着应用程序规模的扩大&#xff0c;引入的依赖项数量也会增加&#xff0c;使得版本冲突和类路径问题成为常见的挑战。为了应对这些挑战&#xff0c;Spring Boot提供了一套简化…

【OpenCV 基础知识 11】计算通道像素值和

cvSplit()函数将复制src的各个通道到图像dst0&#xff0c;dst1&#xff0c;dst2和dst3中。如果源图像少于4个通道的情况下&#xff0c;那么传递给cvSplit()的不必要的目标参数可设置为NULL program cv_Sum;{$APPTYPE CONSOLE} {$R *.res}usesSystem.SysUtils,ocv.highgui_c,oc…

前端基于word模板导出word文档

项目环境 vue2 js vue-cli等 依赖包都可以在npm官网找到对应文档 npm官网(英文) 1、依赖 安装依赖 docxtemplater npm i docxtemplaterfile-saver npm i file-saverjszip-utils npm i jszip-utilsjszip npm i jszip在对应页面或模块中引入依赖 import Docxtemplater …

QQ个性网空间日志网站模板源码

QQ个性网空间日志网站模板源码自带后台登录设置&#xff0c;适用于博客、文章、资讯、其他类网站内容使用。模板自带eyoucms内核&#xff0c;原创设计、手工书写DIVCSS&#xff0c;完美兼容IE7、Firefox、Chrome、360浏览器等;主流浏览器;结构容易优化;多终端均可正常预览。由于…

力扣刷题---2206. 将数组划分成相等数对【简单】

题目描述&#x1f357; 给你一个整数数组 nums &#xff0c;它包含 2 * n 个整数。 你需要将 nums 划分成 n 个数对&#xff0c;满足&#xff1a; 每个元素 只属于一个 数对。 同一数对中的元素 相等 。 如果可以将 nums 划分成 n 个数对&#xff0c;请你返回 true &#xf…

react 低代码平台方案汇总

React作为当前最流行的前端框架之一&#xff0c;其生态系统中孕育了多种低代码平台方案&#xff0c;旨在加速应用开发过程。以下是几款基于React的低代码平台或工具&#xff0c;它们通过可视化构建、预制组件、数据绑定等功能&#xff0c;帮助开发者快速构建应用程序&#xff1…

【Tools】SpringBoot工程下的全局异常处理

Catalog SpringBoot工程下的全局异常处理一、需求二、实现 SpringBoot工程下的全局异常处理 一、需求 程序运行过程中没法保证一定不会出错&#xff0c;即程序中会报异常&#xff0c;而系统默认的异常信息的格式往往和我们自定义返回的消息格式不一致&#xff0c;还会影响返回…

力扣刷题---3146. 两个字符串的排列差

题目描述 给你两个字符串 s 和 t&#xff0c;每个字符串中的字符都不重复&#xff0c;且 t 是 s 的一个排列。 排列差 定义为 s 和 t 中每个字符在两个字符串中位置的绝对差值之和。 返回 s 和 t 之间的 排列差 。 示例 1&#xff1a; 输入&#xff1a;s “abc”, t “b…

AcWing 154. 滑动窗口——算法基础课题解

AcWing 154. 滑动窗口 题目描述 给定一个大小为 n≤10^6 的数组。 有一个大小为 &#x1d458; 的滑动窗口&#xff0c;它从数组的最左边移动到最右边。 你只能在窗口中看到 &#x1d458; 个数字。 每次滑动窗口向右移动一个位置。 以下是一个例子&#xff1a; 该数组为…

运用HTML、CSS设计Web网页——“西式甜品网”图例及代码

目录 一、效果展示图 二、设计分析 1.整体效果分析 2.头部header模块效果分析 3.导航及banner模块效果分析 4.分类classify模块效果分析 5.产品展示show模块效果分析 6.版权banquan模块效果分析 三、HTML、CSS代码分模块展示 1. 头部header模块代码 2.导航及bann…

【SpringCloud】Spring Cloud基本介绍

目录 回顾架构分类单体架构分布式架构微服务架构什么是微服务优点缺点微服务的架构特征&#xff1a;微服务架构面临的挑战技术挑战微服架构的设计原则微服务概念提供者(Provider)消费者(Consumer)RPC和Restful集群分布式 总结 服务拆分和远程调用服务拆分原则服务拆分示例 思考…

docker和docker-compose安装

1.安装docker 安装所需的软件包 sudo yum install -y yum-utils device-mapper-persistent-data lvm2#设置阿里源 sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo更新软件包索引 sudo yum makecache fast查询可安装…

力扣爆刷第143天之二叉树五连刷(二叉搜索树)

力扣爆刷第143天之二叉树五连刷&#xff08;二叉搜索树&#xff09; 文章目录 力扣爆刷第143天之二叉树五连刷&#xff08;二叉搜索树&#xff09;一、530. 二叉搜索树的最小绝对差二、501. 二叉搜索树中的众数三、236. 二叉树的最近公共祖先四、235. 二叉搜索树的最近公共祖先…

http项目改为/支持https的方案、无需修改后台代码

背景描述&#xff1a;原来的项目前后台都是http&#xff0c;现在某个服务要求前台必须使用https&#xff1b; 方案1&#xff1a;前台部署在https里&#xff0c;后面代码修改&#xff1b;但是微服务架构&#xff0c;后台工作量太大&#xff1b; 方案2&#xff1a;前台部署在ht…

Pytorch-08 实战:手写数字识别

手写数字识别项目在机器学习中经常被用作入门练习&#xff0c;因为它相对简单&#xff0c;但又涵盖了许多基本的概念。这个项目可以视为机器学习中的 “Hello World”&#xff0c;因为它涉及到数据收集、特征提取、模型选择、训练和评估等机器学习中的基本步骤&#xff0c;所以…

vue 打印、自定义打印、页面打印、隐藏页眉页脚

花了一天时间搞了个打印功能&#xff0c;现则将整体实现过程进行整理分享。先来看看效果图&#xff1a; 1、页面展示为&#xff1a; 2、重组页面打印格式为&#xff1a;这里重组页面的原因是客户要求为一行两列打印 &#xff01;内容过于多的行则独占一行显示完整。 整体实现&…