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

news2024/9/17 8:46:11

本书用处

内容简介

本书通过对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.coloradmin.cn/o/1686252.html

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

相关文章

插件“猫抓”使用方法 - 浏览器下载m3u8视频 - 合并 - 视频检测下载 - 网课下载神器

前言 浏览器下载m3u8视频 - 合并 - 网课下载神器 chrome插件-猫抓 https://chrome.zzzmh.cn/info/jfedfbgedapdagkghmgibemcoggfppbb 步骤: P.s. 推荐大佬的学习视频! 《WEB前端大师课》超级棒! https://ke.qq.com/course/5892689#term_id…

水面漂浮物生活垃圾识别检测系统

水面漂浮物生活垃圾识别检测系统通过现场监控摄像机对河道湖面等水体进行实时监测,水面漂浮物生活垃圾识别检测系统借助智能视频分析技术和YOLO深度学习技术,系统能够自动识别和抓拍水面上的垃圾漂浮物。一旦系统检测到有垃圾漂浮在水面上,立…

Android-自定义三角形评分控件

效果图 序言 在移动应用开发中,显示数据的方式多种多样,直观的图形展示常常能带给用户更好的体验。本文将介绍如何使用Flutter创建一个自定义三角形纬度评分控件,该控件可以通过动画展示评分的变化,让应用界面更加生动。 实现思…

Pantera 合伙人简谈 Morpho:更高效、适应性更强的 DeFi 解决方案

原文标题:《Pioneering Peer-to-Peer Lending in the DeFi Revolution》撰文:Pantera Capital 合伙人 Paul Veradittakit编译:Chris,Techub News 文章来源:香港Web3媒体Techub News Morpho 正在超越 Compound 等传统…

linux系统安全加固

目录 1、账户安全基本措施 1)系统账户清理 2)密码安全控制 3)命令历史限制 2、用户切换及提权 1)使用 su命令切换用户 2)使用sudo机制提升权限 3、系统引导和安全登录控制 1)开机安全控制 2&…

亚马逊卖家账号注册复杂吗?需要什么辅助工具吗?

在当今数字化的商业世界中,亚马逊作为全球最大的电商平台之一,吸引着无数的卖家和买家。对于想要进入亚马逊销售市场的卖家来说,首先要完成的一项重要任务就是注册亚马逊卖家账号。本文将详细介绍亚马逊注册的步骤、所需时间,以及…

Advanced Installer 使用教程-注册表的读写

一、写入 1、注册表的写入:点击左侧“注册表”,在配置单元注册表的条目上右击选择“新建项”,填入新建项名称,如下图新建了一个“InstallerManager”项 2、在刚才的新建项上右击选择“新建值”,在弹出的窗口中填入名称…

微服务框架Go-kit 01 - 基础示例

一、Go kit简介 Go kit 是一个用于构建可扩展、灵活和可维护微服务的框架和工具集合。它提供了一系列库和组件,涵盖了微服务开发的各个方面,包括服务发现、负载均衡、通信、日志记录、请求跟踪、限流、熔断等。 Go kit 构建微服务时遵循一种类似于传统…

java/php/node.js/python农业技术学习平台【2024年毕设】

本系统带文档lw万字以上 文末可领取本课题的JAVA源码参考 开发环境 开发语言:Java 框架:ssm 技术:ssmvue JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7或8.0 数据库工具:Navicat11 …

AI绘画Stable Diffusion 一键打造网红黏土风格图片,本地部署免费使用!

大家好,我是画画的小强 最近社交平台正在被一股全新的创作潮流所席卷,这就是“黏土AI”的狂潮。这种丑陋但又可爱的风格已经成为网民们热议的话题。无论是在小红书还是其他社交平台上,诸如#黏土、#我的黏土世界等标签都被这种新奇的创作风格…

Flink-cdc更好的流式数据集成工具

What’s Flink-cdc? Flink CDC 是基于Apache Flink的一种数据变更捕获技术,用于从数据源(如数据库)中捕获和处理数据的变更事件。CDC技术允许实时地捕获数据库中的增、删、改操作,将这些变更事件转化为流式数据,并能够…

客厅落地台灯怎么摆放好?五款精品护眼落地灯分享

客厅落地台灯怎么摆放好?在追求品质生活的今天,许多人都选择入手了落地台灯,它不仅能够帮助补充光线,还能够提供敞亮的照明效果,特别在采光不是很好的地方,而客厅落地台灯怎么摆放好?其实大路灯…

SQL刷题笔记day1

1题目 我的代码: select * from employees order by hire_date desc limit 2,1 标准代码: select * from employees where hire_date (select distinct hire_date from employees order by hire_date desc limit 2,1) 复盘:因为按照入…

DOS学习-目录与文件应用操作经典案例-copy

欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一.前言 二.使用 三.案例 一.前言 copy命令的功能是复制一个或多个已经存在的文件到新的位置,或者将多个文件的内容整合后保存为一个单独的文件,亦或者用于创建批…

docker部署kafka实战

目录 一、部署kafaka、zookeeper 二、测试信息发送与接收 三、kafka进阶 一、部署kafaka、zookeeper 请提前安装docker、docker-compose 安装docker:docker--安装docker-ce-CSDN博客 安装docker-compose: 安装docker-compose_安装 docker-compose-CSD…

URL化00

题目链接 URL化 题目描述 注意点 字符串长度在 [0, 500000] 范围内假定该字符串尾部有足够的空间存放新增字符 解答思路 因为该字符串尾部有足够的空间存放新增字符,所以直接使用大小为s.length()的char数组进行操作,使用idx记录当前操作char数组的…

Vue学习笔记2——创建一个Vue项目

Vue项目 1、创建一个Vue项目2、Vue项目的目录结构3、模版语法4、属性绑定5、条件渲染 1、创建一个Vue项目 vue官方文档: https://cn.vuejs.org/打开命令行界面( “winR"再输入"cmd”),切换位置到指定的位置创建vue项目…

Z缓冲技术在AI去衣中的关键角色

引言: 人工智能(AI)技术的飞速发展,为图像处理领域带来了革命性的变化。其中,AI去衣技术作为一种新兴的应用,引起了广泛关注。它不仅在多媒体内容的编辑、虚拟现实和增强现实等领域具有重要的应用价值&…

【B站 heima】小兔鲜Vue3 项目学习笔记Day03

文章目录 Home1.Home整体结构搭建和分类实现2. banner轮播图功能3. Home 面板组件封装4.新鲜好物和人气推荐实现5. 图片懒加载指令实现6. Home- product产品列表实现7. Home-GoodsItem 组件封装 一级路由1. 整体认识和路由配置2. 面包屑导航3. 一级分类 - 轮播图的实现4. 激活状…

MacPro中Ubuntu安装GNOME桌面

第一步,先在MacPro中安装UTM虚拟机。 查看另一文章: https://blog.csdn.net/qq_38382925/article/details/139157877?spm1001.2014.3001.5502 第二步,在虚拟机中安装Ubuntu ARM64 server 查看另一文章: https://blog.csdn.net/qq…