【图书推荐】《Vue.js 3.x+Element Plus从入门到精通(视频教学版)》
配套示例源码与PPT课件下载
百度网盘链接:
https://pan.baidu.com/s/1nBQLd9UugetofFKE57BE5g?pwd=qm9f
自学能力强的,估计不要书就能看代码学会吧。
内容简介
本书通过对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=折非常合适。
相关文章:

【图书推荐】《Vue.js 3.x+Element Plus从入门到精通(视频教学版)》
配套示例源码与PPT课件下载 百度网盘链接: https://pan.baidu.com/s/1nBQLd9UugetofFKE57BE5g?pwdqm9f 自学能力强的,估计不要书就能看代码学会吧。 内容简介 本书通过对Vue.js(简称Vue)的示例和综合案例的介绍与演练,使读者…...

抖店如何打造出爆品?学好这几招,轻松打爆新品流量
大家好,我是电商花花。 近年来,抖店商家越来越多,而选品,爆品就是我们商家竞争的核心了,谁能选出好的新品,打造出爆品,谁的会赚的多,销量多。 做抖音小店想出单,想赚钱…...

软件需求规范说明模板
每个软件开发组织都会为自己的项目选用一个或多个标准的软件需求规范说明模板。有许多软件需求规范说明模板可以使用(例如ISO/IEC/IEEE2011;Robertson and Robertson2013)。如果你的组织要处理各种类型或规模的项目,例如新的大型系统开发或是对现有系统进行微调&…...

vs2013使用qt Linguist以及tr不生效问题
一、qt Linguist(语言家)步骤流程 1、创建翻译文件,在qt选项中 2.选择对应所需的语言,得到.ts后缀的翻译文件 3.创建.pro文件,并将.ts配置在.pro文件中 3.使用qt Linguist 打开创建好的以.ts为后缀的翻译文件,按图所示…...
Leetcode 3163. String Compression III
Leetcode 3163. String Compression III 1. 解题思路2. 代码实现 题目链接:3163. String Compression III 1. 解题思路 这一题的话就是一个简单的贪婪算法,把相同的字符进行归并,然后按照题目中的表示方法进行表示一下即可。 2. 代码实现…...
Java匿名内部类的使用
演示匿名内部类的使用,很重要 package com.shedu.Inner;/*** 演示匿名内部类的使用*/ public class AnonymousInnerClass {//外部其他类public static void main(String[] args) {Outer04 outer04 new Outer04();outer04.method();} }class Outer04{//外部类priva…...

把自己的垃圾代码发布到官方中央仓库
参考博客:将组件发布到maven中央仓库-CSDN博客 感谢这位博主。但是他的步骤有漏缺,相对进行补充 访问管理页面 网址:Maven Central 新注册账号,或者使用github快捷登录,建议使用github快捷登录 添加命名空间 注意&…...

单机一天轻松300+ 最新微信小程序拼多多+京东全自动掘金项目、
现代互联网经济的发展带来了新型的盈利方式,这种方法通过微信小程序的拼多多和京东进行商品自动巡视,以此给商家带来增加的流量,同时为使用者带来利润。实践这一手段无需复杂操作,用户仅需启动相应程序,商品信息便会被…...

线性回归模型之套索回归
概述 本案例是基于之前的岭回归的案例的。之前案例的完整代码如下: import numpy as np import matplotlib.pyplot as plt from sklearn.linear_model import Ridge, LinearRegression from sklearn.datasets import make_regression from sklearn.model_selectio…...

解决文件夹打开出错问题:原因、数据恢复与预防措施
在我们日常使用电脑或移动设备时,有时会遇到一个非常棘手的问题——文件夹打开出错。这种错误可能会让您无法访问重要的文件和数据,给工作和生活带来极大的不便。本文将带您深入了解文件夹打开出错的原因,并提供有效的数据恢复方案࿰…...

Spring:面向切面(AOP)
1. 代理模式 二十三种设计模式中的一种,属于结构型模式。它的作用就是通过提供一个代理类,让我们在调用目标方法的时候,不再是直接对目标方法进行调用,而是通过代理类**间接**调用。让不属于目标方法核心逻辑的代码从目标方法中剥…...

本地镜像文件怎么导入docker desktop
docker tag d1134b7b2d5a new_repo:new_tag...

【机器学习-23】关联规则(Apriori)算法:介绍、应用与实现
在现代数据分析中,经常需要从大规模数据集中挖掘有用的信息。关联规则挖掘是一种强大的技术,可以揭示数据中的隐藏关系和规律。本文将介绍如何使用Python进行关联规则挖掘,以帮助您发现数据中的有趣模式。 一、引言 1. 简要介绍关联规则学习…...

Gradle筑基——Gradle Maven仓库管理
基础概念: 1.POM pom:全名Project Object Model 项目对象模型,用来描述当前maven项目发布模块的基础信息 pom主要节点信息如下: 配置描述举例(com.android.tools.build:gradle:4.1.1)groupId组织 / 公司的名称com.…...
c++11:智能指针的种类以及使用场景
指针管理困境 内存释放,指针没有置空;内存泄漏;资源重复释放 怎样解决? RAII 智能指针种类 shared_ptr 实现原理:多个指针指向同一资源,引用计数清零,再调用析构函数释放内存。 使用场景…...

RabbitMQ-默认读、写方式介绍
1、RabbitMQ简介 rabbitmq是一个开源的消息中间件,主要有以下用途,分别是: 应用解耦:通过使用RabbitMQ,不同的应用程序之间可以通过消息进行通信,从而降低应用程序之间的直接依赖性,提高系统的…...

阿里云百炼大模型使用
阿里云百炼大模型使用 由于阿里云百炼大模型有个新用户福利,有免费的4000000 tokens,我开通了相应的服务试试水。 使用 这里使用Android开发了一个简单的demo。 安装SDK implementation group: com.alibaba, name: dashscope-sdk-java, version: 2.…...
亲测有效,通过接口实现完美身份证号有效性验证+身份证与姓名匹配查询身份实名认证接口(实时)
最近发现一个限时认证的接口分享给大家,有需要的拿去试下吧. 附上部分密钥f478186edba9854f205a130aa888733d227a8f82f98d84b9【剩余约125450次,无时间限制】 b6131281611f6e1fc86c8662f549bdd683a68517203ba312【剩余约1300次,无时段限制】 …...

试题11 输出什么?
...

对vue3/core源码ref.ts文件API的认识过程
对toRef()API的认识的过程: 最开始认识toRef()是从vue3源码中的ref.ts看见的,右侧GPT已经举了例子 然后根据例子,在控制台输出ref对象是什么样子的: 这就是ref对象了,我们根据对象中有没有__v_isRef来判断是不是一个ref对象,当对象存在且__v_isRef true的时候他就判定为是一个…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...

(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...

算法笔记2
1.字符串拼接最好用StringBuilder,不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

(一)单例模式
一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

wpf在image控件上快速显示内存图像
wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像(比如分辨率3000*3000的图像)的办法,尤其是想把内存中的裸数据(只有图像的数据,不包…...