Vue 3.0从入门到实战 微课视频版

学习Vue 3.0的推荐书籍，配套资源丰富

本书主要介绍Vue 3.0的语法及其在实际项目中的运用，并对Vue 2.x的升级与删改进行了讲解。从Vue作为框架的自身特性出发，与其他一些主流框架进行对比，然后深入Vue语法的具体解析。除了编写单个Vue页面，本书也介绍了如何从零开始完整搭建使用Vue的前端项目。此外，对工程开发中常用的插件与工具也做了介绍，如Vuex、CLI和Element-plus等。 本书的示例与图解丰富且实用，内容通俗易懂，适合前端框架的初学者和对Vue 2.x有了解的开发者。希望通过阅读本书，读者对Vue的语法逻辑与实际使用都有透彻的理解。

"吕云翔,1986-1992： 北方交通大学讲师； 1992-1994： 比利时VUB大学应用信息技术硕士； 1994-1996： 比利时VUB大学MBA； 1996-2003： IT公司项目经理 2003-至今： 北航软件学院副教授。已出版二十几本教材。 江一帆，2017-2021：北京航空航天大学学士；2021-至今：美国南加州大学研究生。 江一帆，2017-2021：北京航空航天大学学士；2021-至今：美国南加州大学研究生。"

第1章Vue.js介绍
1.1什么是Vue.js
1.2Vue与其他框架
1.2.1Vue与React
1.2.2Vue与AngularJS
1.2.3Vue与Angular(Angular2)
1.2.4Vue与其他框架
1.3Vue 3.0的简述
1.3.1Vue 3.0的新特性
1.3.2从Vue 2.x开始的重大改变
1.3.3库与工具的支持
1.4本章小结
1.5练习题
第2章个Vue应用
2.1准备Vue 3.0
2.1.1引入Vue.js
2.1.2安装Vue Devtools
2.2Vue实例和数据绑定
2.2.1构建Vue 3.0项目
2.2.2项目实例：Hello Vue3
2.2.3setup函数与生命周期
2.2.4数据
2.2.5数据实例：显示响应式对象
2.2.6方法
2.2.7方法实例：修改响应式对象的值
2.3本章小结
2.4练习题
第3章Vue的内置指令与语法
3.1插值绑定
3.1.1文本插值与表达式
3.1.2过滤器
3.1.3HTML插值
3.2计算属性
3.2.1计算属性的概念
3.2.2计算属性
3.2.3侦听属性
3.3v-bind属性绑定
3.3.1v-bind指令
3.3.2绑定class、style与prop
3.4v-model双向绑定
3.4.1v-model指令
3.4.2v-model与修饰符
3.4.3双向绑定实例：制作问卷
3.5v-if/v-show条件渲染
3.5.1v-if、v-else-if与v-else指令
3.5.2v-show指令
3.5.3v-if对比v-show指令
3.5.4条件渲染实例：按钮权限控制
3.6v-for列表渲染
3.6.1v-for指令
3.6.2在v-for里使用对象
3.6.3列表的更新
3.6.4列表渲染的key
3.6.5v-for与v-if指令共用
3.6.6列表渲染实例：帖子列表
3.7v-on事件绑定
3.7.1v-on指令
3.7.2事件修饰符
3.8指令在Vue 3.x中的变化
3.8.1v-if与v-for的key
3.8.2v-if与v-for的优先级
3.8.3v-bind合并行为
3.8.4v-for中的ref数组
3.8.5v-model
3.9本章小结
3.10练习题
第4章class与style绑定
4.1绑定HTML class
4.1.1对象语法
4.1.2数组语法
4.2绑定内联样式
4.2.1对象语法
4.2.2数组语法
4.3本章小结
4.4练习题
第5章过滤器
5.1内置过滤器
5.1.1字母过滤器
5.1.2json过滤器
5.1.3过滤器
5.1.4currency过滤器
5.1.5debounce过滤器
5.2本章小结
5.3练习题
第6章过渡与动画
6.1过渡与动画概述
6.1.1基于class的动画和过渡
6.1.2基于style的动画和过渡
6.2单元素的过渡
6.2.1进入与离开过渡
6.2.2CSS过渡与动画
6.2.3自定义过渡class类名
6.2.4JavaScript过渡
6.3其他过渡
6.3.1多元素过渡
6.3.2过渡模式
6.3.3列表过渡
6.3.4列表过渡案例：打乱列表
6.4本章小结
6.5练习题
第7章组件
7.1组件的注册
7.1.1全局注册
7.1.2局部注册
7.2组件的数据传递
7.2.1props参数
7.2.2组件通信
7.2.3v-model参数
7.2.4Vue 3.0中的v-model修饰符
7.3插槽内容分发
7.3.1插槽的基本用法
7.3.2插槽的作用域
7.3.3插槽的后备内容
7.3.4具名插槽
7.3.5作用域插槽
7.4动态组件
7.4.1动态组件的基础用法
7.4.2keep-alive
7.5组件案例：完善标签页组件
7.6组件在Vue 3.0中的变化
7.6.1函数式组件
7.6.2内联模板Attribute
7.7本章小结
7.8练习题
第8章前端路由
8.1vue-router的基本用法
8.1.1vue-router的安装
8.1.2vue-router的基本使用
8.1.3跳转
8.2动态路由匹配
8.2.1带参数的动态路由匹配
8.2.2响应参数变化
8.2.3参数全匹配
8.3路由匹配的语法
8.3.1自定义正则表达式
8.3.2可选参数
8.3.3可重复参数
8.4嵌套路由
8.5命名路由
8.6重定向和别名
8.6.1重定向
8.6.2别名
8.7向路由组件传递参数
8.7.1向路由组件传递参数的基本语法
8.7.2传递参数的模式
8.8vue-router 4.0的变化
8.8.1vue-router的创建
8.8.2新的history选项
8.8.3删除*路由
8.8.4router-link的修改
8.8.5去除router.app
8.8.6向route组件的slot传递内容
8.8.7$route属性编码
8.9本章小结
8.10练习题
第9章状态管理与Vuex
9.1Vuex简介
9.1.1状态管理模式
9.1.2安装Vuex
9.1.3Vuex的基本使用
9.2Vuex中的状态
9.2.1单一状态树
9.2.2将Vuex状态加入Vue组件
9.2.3mapState的使用
9.2.4组件的本地状态
9.3Vuex中的getter
9.3.1仓库的getter
9.3.2属性式访问
9.3.3方法式访问
9.3.4mapGetter的使用
9.4Vuex中的mutation
9.4.1mutation的有效负载
9.4.2通过对象提交
9.4.3mutation的同步
9.5Vuex中的action
9.5.1action的基本使用
9.5.2调度action
9.5.3组成action
9.6Vuex中的模块
9.7本章小结
9.8练习题
第10章Vue项目的搭建与部署
10.1项目目录介绍
10.1.1dist文件夹
10.1.2node modules文件夹
10.1.3src文件夹
10.2前端页面开发
10.2.1Vue文件
10.2.2导入import
10.3打包与部署
10.3.1项目打包
10.3.2项目部署
10.3.3通过GitHub Action自动部署
10.4本章小结
10.5练习题
第11章实战项目：制作面向知识传播的社区论坛
11.1项目目标
11.2项目搭建
11.3编写前端页面
11.3.1顶部导航栏
11.3.2课程列表页
11.3.3课程内容页
11.3.4学生管理页
11.3.5课程讨论页
11.4本章小结
参考文献

     第3章Vue的内置指令与语法 视频讲解 本章将会对Vue 3.0中的语法和内置指令进行介绍，包括插值绑定、计算属性、条件渲染指令、列表渲染指令等，对于在Vue 3.0中有变更的部分会在对应的小节中进行说明。 3.1插 值 绑 定 3.1.1文本插值与表达式 文本插值最基本的方法是使用双大括号(Mustache语法)“{{ }}”，Vue将会获取计算后的值，将大括号里的内容替换为设定值，然后以文本的形式将其展示出来。无论通过任何方法修改数据设定值，大括号的内容都会被实时替换。例22中的hello、例25中的a、b、c都是通过这种方式在页面中显示数据的。 除了直接赋值，Mustache语法也接受表达式形式的值。表达式可由JavaScript表达式和过滤器构成。表达式可以有变量、数值、运算符等，表达式的值是它的运算结果。虽然不支持条件语句，但可以通过三元式实现简单的条件判断。 例31展示了通过文本插值与表达式计算变量、表达式、条件运算符的值，在页面中的效果如图31所示。 【例31】通过文本插值计算变量、表达式、条件运算符的值 图31通过文本插值显示 变量、表达式、条件 运算符值的效果 Vue的“{{ }}”内只支持单个表达式，不支持语句和流控制。并且在表达式中，不能使用用户自定义的全局变量。“{{ }}”可以放在HTML标签内，但Vue指令和自身特性内是不可以插值的。 如果想显示“{{ }}”标签而不进行替换，可以使用vpre跳过这个元素和它的子元素的编译过程。此外，HTML绑定Vue实例，在页面加载时可能会闪烁。原因是Vue来不及渲染，页面显示出了Vue源代码，可以使用vcloak指令隐藏未编译的Mustache标签直到实例准备完毕。 3.1.2过滤器 在Vue 2.x中支持在“{{ }}”插值的尾部添加过滤器，用管道符“|” 表示。经常用于格式化文本，如字母全部大写、格式化日期等。过滤的规则是可以自定义的，通过给Vue实例添加filters来设置。在Vue 3.0中，过滤器已被移除，建议使用方法或计算属性来实现。 下面的例32实现了内置过滤器、过滤器串联与过滤器传参。uppercase是Vue的一个内置过滤器，可以将字符串转换为大写。通过使用多个管道符号可以将多个过滤器进行串联。 【例32】内置过滤器、过滤器串联与过滤器传参 {{ string | uppercase }} {{ string | filterA | filterB }} {{ string | filter arg1 arg2 }} 当有多个参数时，可以通过空格将参数分开，过滤器会将string作为第一个参数，arg1、arg2分别作为第二个、第三个参数传入。参数可以是表达式，也可以使用单引号传入字符串。 包括uppercase，Vue总共内置了10种过滤器，将会在第5章进行详细介绍。 3.1.3HTML插值 HTML插值可以动态渲染DOM节点，常用于处理开发者不可预知和难以控制的DOM 结构。与文本插值不同的是，文本插值中的代码被解释为节点的文本内容，而HTML插值中的代码则被渲染为视图节点。 对于值是HTML的片段，可以使用三个大括号“{{{ }}}”来绑定，也可以在标签内使用vhtml=" "的形式。所接收的字符串不会进行编译等操作，Vue会把被绑定的内容解析为DOM节点，按照普通HTML处理，从而实现动态渲染视图的效果。 需要注意的是，在网站上直接动态渲染任意HTML片段，容易导致XSS（Cross Site Scripting，跨站脚本攻击）。因此，开发者应尽量多地使用Vue自身的模板机制，减少对HTML插值的使用，并且只对可信内容使用HTML插值。 3.2计 算 属 性 }; 其中，在进行相等的条件判断时，应该使用===。===是Ecmascript的语言，表示严格等于判断，由于JavaScript中的==有缺陷，因此在绝大多数情况下，都是使用三个等号的形式。 因为vif是一个指令，所以必须将它添加到一个元素上。因此，如果想要一次判断多个元素，可以把一个Vue内置的