Vue简明教程

在前面的学习中，我们用到过var、let、const去定义变量，那么它们定义的变量之间到底有什么区别呢？今天我们就一起来看看。

已经掌握了vue3入门的同学，在实际学习和开发中用的最多的概念肯定会有响应式，今天我们就一起来复习下关于vue3的响应式用法。

接上节，我们初步体验了layui-vue的用法。相比其他ui框架，layui-vue的数据结构显得不是非常友好，但是经过数据拼凑也是能够成功运行的。 今天我们就主要介绍下如何在vue3中使用异步请求。

之前，我曾经介绍过使用vue+LayUI+FastApi实现前后端分离的小demo，有同学单独跟我推荐说有专门适配vue的LayUI版本，它就是layui-vue，今天我们一起来体验一下。

前后端分离入门级教程，教你手把手使用vue脚手架创建项目，安装插件，使用axios对后端服务进行请求拿到数据并结合elementPlus渲染到页面，后端采用FastApi实现。

期望在自己创建的vue项目中定义自己的路由，自己的组件，实现前后端分离的小demo。让之前的学习能够更加贴近实战，对vue的前端开发流程有个清晰的了解。

前面我们在学习的时候都是将Vue的代码直接写在html文件的script中，但实际工作中，我们会使用工具（比如vue-cli）创建完整的项目结构，同时将vue项目托管于Node中，实现前端服务的部署。

前面我们在学习 Vue 的时候都是将 Vue 的代码直接写在 html 文件的 script 中，但实际工作中，我们会使用工具（比如 `vue-cli`）创建完整的项目结构，今天我们一起来学习下。

在前面的Api开发中，我们使用FastApi已经可以很好的实现。但是实际使用中，我们通常建议前后端项目分离。今天我们就使用FastApi+Vue+LayUI做一个前后端分离的Demo。

什么是组件？ 官方文档说，组件是带有名称的可复用实例。实际上你可以理解组件就是一个名为 zj 的 html 模板，当你要使用这个 html 模板的时候，你可以直接用 zj 标签即可。

我们知道 v-model 是双向数据绑定的代表。今天我们就一起来深入了解 v-model 表单绑定的更多内容。

前面我们已经了解了条件渲染和列表渲染，计算属性动态绑定等。今天我们学习一个常用的概念：事件绑定，即在事件被触发时执行某些动作。

在前面的章节中，我们已经了解了关于 Vue 的条件渲染，今天我们就一起来看看 Vue 的列表渲染，即 For 循环。

你可能已经知道 Vue 中有两个条件渲染方法，即 v-if 和 v-show，那么对于他两有什么却别和使用场景呢？今天我们就一起来看下。

通常在我们的登录页面会有多种登录类型，我们可以通过条件渲染来切换不同的登录表单。即跟据不同条件展示不同页面。

当我们需要根据不同的条件对前端页面进行不同的渲染时，我们就需要用到条件渲染。Vue 为我们提供了 v-if、v-else-if、v-else 方法。

当我们需要操作元素的 class 列表时，我们可以使用 v-bind 实现，但是直接计算整体字符显得很笨，针对这个问题，Vue 以通过 v-bind:class 对 class 实现动态绑定。

默认的，计算属性实现了 getter 属性，我们可以直接拿到计算属性的值。但是如果尝试对计算属性的值进行修改，会成功吗？ 如上，不出意外的在对计算属性进行 setter 操作的时候失败了。

上节，我们已经了解了计算属性和方法的区别，其实在 Vue 中还有一种可以根据 Vue 实例的数据而实时变化的属性，即侦听属性。由于这种属性的好处，你可能会滥用它，导致代码的臃肿。

接上节内容，我们将需要在模板插值表达式中复杂的计算使用 Vue 的计算属性进行了简化，可能你已经注意到，Vue 的计算属性和 Vue 中的方法很像，只是计算属性的使用类似变量，方法的使用需要加上括号。