源滚滚编程

三元表达式时JavaScript中比较常用的一种原生语法，能够在一行代码中实现if-else的分支逻辑。在Vue的双大括号中，我们也可以使用三元表达式去实现一些简单的条件渲染。

在Vue3中通过axios请求后端数据是非常常用的方法，这节课我们来简单学习下。

在Vue3中通过SCSS编写样式并不难，这节课我们来简单的学习一下。

通过ref获取DOM节点也是一种非常常见的用法。最常见的地方就是表单提交的时候，我们经常会给表单绑定一个ref，在条件之前通过ref获取表单数据，并校验表单数据是否正确。在本节课中，我们使用ref引用一个textarea文本域，同事实记录文本域中的段落数量，句子数量和单词数量。

通过插槽向父组件传值，是一种比较高级的，但是非常使用的技术，在很多UI组件库里面经常看到。这节课我们来学习一下这种用法。

当你想要给外部预留多个位置的时候，具名插槽就非常有用了。比如，我们定义一个卡片，让别人使用的时候，标题可以自定义，内容也可以自定义，这个时候就需要两个插槽。

插槽在真实的开发中使用非常的多，比如我们去用一些第三方组件库的时候，通常都需要通过自定义插槽来实现内容的自定义。在Vue3中使用插槽非常的简单。插槽相当于在组件中给你预留一块位置，你可以将自己的vue3相关的代码插入到这个位置中。

在Vue3中，通过emit给父组件传值也经常被用到。如果需要给父组件传值，emit是最通用的做法，建议重点掌握。

通过prop传递值给子组件在Vue3中是非常常用的方法。比如，我们可以设计一个卡片组件，往这个组件中，传递标题和内容，卡片会进行相应的渲染。

更多的时候，我们可能想要监听的是对象中的某个属性。比如，我们提交用户的登录表单，有username，password和re_password的三个属性，我们监听re_password这个属性，一旦发生改变，我们就要判断其和password是否一致，如果不一致，我们就提示给用户，两次密码不一致，请修改。这节课我们来使用这个案例学习一下在Vue3中监听对象属性的基本用法。

监听器是Vue3中非常好用的一个特性，用于监听某个响应式变量的变化。监听器支持在被监听的响应式变量发生改变的时候，获取修改之前的值和修改之后的值，并触发一个回调函数。比如，我们拿熟悉的计数器案例来说，正常逻辑下计数器是不能够低于0的，那么我们监听到计数器小于0的时候，就弹出提示。

计算属性在真实的开发中也经常被用到。比如在我最近在研发的一个学生管理系统中，学生有“所属省份”和“所属城市”两个独立属性，比如所属省份是四川，所属城市是成都，但是我们显示的时候要显示为“四川/成都”，这个时候用计算属性就非常合适。这节课我们使用计算属性演示一下这个案例。

Vue 组件生命周期事件发生在组件从创建到删除的生命周期中。必要时，我们可以在组件生命周期的每个阶段添加回调和副作用。

绑定匿名方法和绑定普通方法主要是写法上的区别，其他的区别并不是很大。就拿上一个案例来说，我们使用匿名函数可以很简单的重写。

使用点击事件绑定一个普通方法是我个人在真实开发中比较喜欢用的一种操作，原因是我认为使用function关键字标识出来的方法，在大段的代码中，看起来更有识别性，能够很轻松的和const定义的常量区分开来。虽然使用const也可以通过匿名函数来定义方法，而且比较新颖，但是我目前并不推荐这种做法，因为我并没发现const定义的函数比function定义的函数有哪些非常明显的优势，甚至会让代码的可读性变低。这里，我们演示一下事件绑定普通方法，以一个非常经典的计数器案例为例子。

使用v-for遍历对象在真实的开发中比较少见，了解即可。对象我更喜欢统一称之为字典，假如你哪天发现我在某个前端的教程中把对象叫做字典，请你知道这两个是同一个玩意儿。所谓字典，就是一种key-value类型的结构的统称。比如，用户信息中有name表示姓名，age表示年龄，gender表示性别，这里的name，age，gender叫做key，他们记录的值，比如张三，22，男则叫做value。现在我们学习一下，如何使用v-for去遍历一个字典。

使用v-for遍历对象数组在真实的开发中也属于非常常见的用法，需要重点掌握。因为目前流行的是前后端分离开发，在前后端分离开发中，最常需要处理的就是对象数组类型的数据了。比如，将员工信息渲染到表格中。这节课我们就来使用v-for渲染对象数组的方式实现一下这个案例。

使用v-for遍历普通数组在真实开发中还是比较常见的。

使用v-for遍历数字在生产环境中并不多见，但是在开发环境中，有时候会被用到。比如我们想要快速生成10个卡片，看看页面中同时存在10个卡片时是什么样式，这个时候就可以直接使用v-for加数字来实现。这节课，我们就来演示一下这种场景。

使用v-model绑定文本域则属于不太常见的情况了，因为文本域一般会被富文本替代，而富文本的话一般又会引入一些第三方的富文本库，所以在真实的开发中，使用v-model绑定文本域的场景实际上并不多见。这里，我们了解一下v-model绑定文本域的基本用法，熟悉一下用法即可。

使用v-model绑定下拉框也属于非常常见的需求，比如我们需要通过下拉框选择文章的分类，通过下拉框选择员工所属的部门等。这节课我们通过这两个案例来学习一下使用v-model绑定下拉框的基本用法。

使用v-model绑定多选框也是一种比较常见的需求，比如一个用户可以绑定多个角色，可以有多个兴趣爱好。在本节课中，我们来学习一下这两种用法。

使用v-model绑定单选框也比较常见，比如性别，要么是男，要么是女。比如单选题，给出多个选择，但是只能选择其中的一个。在本节课中，我们演示一下这两种常见的用法。

v-model用于实现双向数据绑定，使用v-model绑定输入框是Vue3中最常见的用法之一。比如，在制作登录界面的时候，我们会使用v-model绑定用户名和密码，这里的用户名和密码都是输入框。

v-show用于实现组件的显示和隐藏，和v-if单独使用的时候有点类似。不同的是，v-if会直接移除dom元素，而v-show只是让dom元素隐藏，而不会移除。在实际开发中，v-show也经常被用到，需要重点掌握。

v-if指令主要用来实现条件渲染，在实际项目中使用得也非常多。v-if通常会配合v-else-if、v-else指令一起使用，可以达到多个条件执行一个，两个条件执行一个，满足一个条件执行等多种场景。下面，我们分别演示这三种使用场景。

v-bind指令可以说是Vue3中最常用的指令之一，使用v-bind，我们几乎能够给任何实现动态的绑定比值。这里，我们主要演示以下，通过v-bind动态绑定CSS样式。

v-html主要是用来渲染富文本内容，比如评论信息，新闻信息，文章信息等。v-html是一个特别不安全的指令，因为它会将文本以HTML的显示进行渲染，一旦文本里面包含一些恶意的js代码，可能会导致整个网页发生崩溃。不过，v-html在渲染富文本的场景中，有着非常大的优势，所以在一些博客网站项目中，经常能够看到这个指令的出现。

在Vue3中，要定义响应式的变量，最常见的方案之一，就是使用ref去进行定义。

v-once主要用来实现一次渲染，有点类似于单例模式的概念。使用v-once渲染的内容，无论后来如何发生变化，是否为响应式，在页面中显示的始终是第一次展示给用户的内容。不过，这个指令使用的场景也非常少，作为了解即可。

v-text指令主要是用来渲染文本内容，和双大括号的效果基本一致，所以使用场景非常少。一般情况下，我们都会使用双大括号语法去渲染文本内容，而不是使用v-text指令。

实际上动态渲染数据，在《使用CDN开发Vue3项目》中就已经学习过了，核心代码如下：

在Vue3中，一个组件就是一个.vue文件。在本小节中，我们来开发第一个Vue3组件。这个组件的功能非常的简单，只需要在浏览器上输出一个固定的字符串”欢迎跟着Python私教一起学Vue3“即可。

要使用vite创建Vue3项目，有很多种方式，如果使用命令，则推荐如下命令：不过，笔者更推荐搭建使用基于目录结构的构建方式，这种方式能够避免过度依赖网络环境，而且还能够得到一个非常整洁的初始环境，非常便于初学者。即使是后期变得越来越熟练，这种基于模板代码去开发的方案，依然非常适合。vite.config.jsindex.htmlsrc/main.jssrc/App.vue启动方式浏览器访问：http://localhost:5173/

使用CDN引入Vue的方式已经越来越少有人用，只需要了解即可。目前新开发的项目基本上都是前后端分离的项目，CDN引入的方式适用于前后端不分离的项目。

本套课程是2023年12月17日以后编写的，适用于NodeJS20+Vite5+Vue3的一套视频课，非常适合零基础入门学习Vue3的同学。本套视频课的教案会免费发布在CSDN、公众号、知乎，简书、掘金等平台，视频课程则会发布在Bilibi网站。