- 博客(105)
- 收藏
- 关注
RSS订阅原创 Vue3进阶教程：1.初次了解vue
此课程对针对有点vue基础的同学，或者看过我上部分vue的教程。与之前我的Vue教程不同的是，写法和内容有区别。vue文件目录和各个文件在这里不做介绍。打开：localhost:5173。下 创建文件夹和文件。
2025-05-27 20:59:36
1059
1
原创 前端流行框架Vue3教程：28. Vue应用
方法后才会渲染出来。该方法接收一个“容器"参数，可以是一个实际的DOM元素或是一个 CSS 选择器字符串。Vue教程至此结束。当然，vue要学的还有很多，比如前后端分离等等。的对象实际上是一个组件，每个应用都需要一个根组件”，其他组件将作为其子组件。文件夹的作用就是存放公共资源，例如：图片、公共CSS或者字体图标等。函数创建一个新的 应用实例。应用实例必须在调用了。
2025-05-25 23:36:36
487
原创 前端流行框架Vue3教程：27. 依赖注入
可以帮助我们解决这一问题。一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用。通常情况下，当我们需要从父组件向子组件传递数据时，会使用。则必须将其沿着组件链逐级传递下去，这会非常麻烦。这一问题被称为“prop 逐级透传”只能由上到下的传递，不能反向传递。
2025-05-25 23:27:35
402
原创 前端流行框架Vue3教程：25. 组件保持存活
我们点更新数据，A组件会变成新数据。切换组件B后，再去切回A组件，发现又变成了老数据。说明我们在切换的时候，组件被卸载了，所以加载的还是原始的数据。来在多个组件间作切换时，被切换掉的组件会被卸载。组件强制被切换掉的组件仍然保持"存活”的状态。那么我们怎么保持组件存活呢？此时，我们切换回A组件，就还是新数据了。
2025-05-24 22:14:46
519
原创 前端流行框架Vue3教程：24.动态组件
有些场景会需要在两个组件间来回切换，比如 Tab 界面。此时，我们就可以点击按钮切换组件了。我们准备好A B两个组件。
2025-05-24 22:14:29
531
原创 前端流行框架Vue3教程：22. 组件生命周期
每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码在 Vue 中，组件的生命周期是指从创建到销毁的整个过程。Vue 提供了多个钩子函数，允许我们在特定的阶段执行自定义逻辑。Vue 组件的生命周期可以分为四个主要阶段：2. 挂载阶段beforeMount()：模板编译/挂载之前，此时还没有渲染 DOM。mounted()：模板渲染完成
2025-05-22 10:51:43
416
原创 前端流行框架Vue3教程：21. 插槽（3）
在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。我们也确实有办法这么做！那样，向一个插槽的出口上传递。
2025-05-20 16:39:16
164
原创 前端流行框架Vue3教程：20. 插槽slot（2）
插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。在外部没有提供任何内容的情况下，可以为插槽指定默认内容。其意思就是“将这部分模板片段传入子组件的。
2025-05-20 15:56:52
233
原创 前端流行框架Vue3教程：19. 插槽slot（1）
插槽是 Vue 中组件内容分发的机制，允许你在父组件中向子组件传递任意 HTML 内容。子组件通过定义插槽入口。父组件在使用子组件时，在其标签内部写入内容即可传入插槽。插槽内容支持任何 HTML 元素和结构。<slot>元素是一个插槽出口(slotoutlet)，标示了父元素提供的插槽内容(slotcontent)将在哪里被渲染。
2025-05-20 15:40:02
289
原创 前端流行框架Vue3教程：18. 透传 Attributes
透传attribute指的是传递给一个组件，却没有被该组件声明为props或emits的attribute或者v-on事件监听器。最常见的例子就是class、style和id当一个组件以单个元素为根作渲染时，透传的attribute会自动被添加到根元素上透传 Attributes 是 Vue 的一个特性，允许父组件传递任意属性到子组件上，而无需显式声明。这在封装可复用的组件时非常有用。
2025-05-16 15:50:58
448
原创 前端流行框架Vue3教程：17. _组件数据传递
我们之前讲解过了组件之间的数据传递，props和自定义事件 两种方式props：父传子自定义事件：子传父除了上述的方案，props也可以实现子传父。
2025-05-15 23:01:49
315
原创 前端流行框架Vue3教程：16. 组件事件配合`v-model`使用
父子组件通信：通过$emit在子组件中发送事件，在父组件中监听并处理。数据绑定v-model简化了表单元素与数据之间的双向绑定。模块化开发：将功能拆分为多个组件，提高可维护性和复用性。
2025-05-15 22:14:02
510
原创 前端流行框架Vue3教程：15. 组件事件
触发自定义事件的目的是组件之间传递数据。在组件的模板表达式中，可以直接使用。我们来创建2个组件。子传父：自定义事件(
2025-05-13 20:59:02
270
原创 前端流行框架Vue3教程：14. 组件传递Props效验
比如我们用button添加个事件，是不允许修改父元素传递过来的数据。Vue组件可以更细致地声明对传入的props的校验要求。
2025-05-06 20:27:16
226
原创 前端流行框架Vue3教程：13. 组件传递数据_Props
传递数据，不仅可以传递字符串类型的数据，还可以是其他类型，例如：数字、对象、数组等。组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的。传递数据：只能从父级传递到子级，不能反其道而行。但实际上任何类型的值都可以作为。传递数据的解决方案就是。我们新增2个vue文件。
2025-05-06 16:04:48
226
原创 前端流行框架Vue3教程：12. 组件的注册方式
全局注册，但并没有被使用的组件无法在生产打包时被自动移除（也叫"tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的JS文件中。全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。一个Vue组件在使用前需要先被“注册”，这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。局部注册需要使用components选项。
2025-05-06 15:50:54
152
原创 前端流行框架Vue3教程：11. 组件嵌套关系
组件允许我们将 UI划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构。这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。方便我们干净的创建组件和引用关系。这个时候，我们大概就可以看到页面整体的样式了。里引用这个组件，而不是App.vue。全部写完后我们看下页面，就完成了。我们就可以看到页面显示了。我们继续写其他的：（记得在。创建新项目后，我们删掉。上面图我们可以看到，
2025-01-21 16:47:59
1047
原创 前端流行框架Vue3教程： 10. 组件组成
当使用构建步骤时，我们一般会将Vue组件定义在一个单独的vue文件中，这被叫做单文件组件(简称SFC)组件最大的优势就是可复用性。
2025-01-20 09:17:32
226
原创 前端流行框架Vue3教程： 9. 模板引用
虽然Vue的声明性渲染模型为你抽象了大部分对DOM的直接操作，但在某些情况下，我们仍然需要直接访问底层DOM元素。要实现这一点，我们可以使用特殊的。attribute挂载结束后引用都会被暴露在。
2025-01-19 08:52:44
264
原创 前端流行框架Vue3教程： 8. 表单输入绑定
在前端处理表单时，我们常常需要将表单输入框的内容同步给JavaScript 中相应的变量。默认情况下， v-mode!会在每次 input 事件后更新数据。修饰符来改为在每次 change 事件后更新数据。输入的时候并不能时时显示，失去焦点的时候才会显示。手动连接值绑定和更改事件监听器可能会很麻烦,这样，就可以时时看到输入内容了。单一的复选框，绑定布尔类型值。指令帮我们简化了这一步骤。
2025-01-18 08:38:29
186
原创 前端流行框架Vue3教程：6. Class绑定
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表，因为 class 是 attribute，我们可以和其他attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 cass 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达的值也可以是对象或数组。如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式。
2025-01-16 13:11:51
367
原创 前端流行框架Vue3教程：5. 计算属性
模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护，因此我们推荐使用计算属性依赖响应式状态的复杂逻辑。你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果。如果上面逻辑太多的话，会让模板变得臃肿。所以我们用计算属性。
2025-01-15 13:31:44
180
原创 前端流行框架Vue3教程：4. 数组变化侦测
变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变（immutable）方法，例如。，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的。Vue 能够侦听应式数组的变更方法，并在它们被调用时触发相关的更新。我们可以看到，并不会自动更新。但数组已经是添加进去了的。
2025-01-14 13:32:16
310
原创 前端流行框架Vue3教程：3. 事件处理（3） 事件修饰符
尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。上面代码，我们点击 测试冒泡，就会2个事件都触发。这样，我们点百度一下，就不会跳转了。其他修饰符大家可以参考官网自行尝试。为解决这一问题，Vue 为。
2025-01-13 09:24:45
252
原创 前端流行框架Vue3教程：3. 事件处理（1）事件处理
来监听DOM事件，并在事件触发时执行对应的JavaScript。内联事件处理器通常用于简单场景。我们点击按钮的时候，会累计增加。
2025-01-10 09:41:28
207
原创 前端流行框架Vue3教程：2. Vue模板语法（4） 列表渲染
Vue默认按照“就地更新”的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。为了给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的。绑定的值期望是一个基础类型的值，例如字符串或number类型。也支持使用可选的第二个参数表示当前项的位置索引。的值，我们要确保每一条数据的唯一索引不会发生变化。推荐在任何可行的时候为v-for提供一个。
2025-01-09 09:31:55
136
原创 前端流行框架Vue3教程：2. Vue模板语法（3）条件渲染
也是惰性的:如果在初次渲染时条件值为 false，则不会做任何事。是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。这个时候 flag: false是看不到内容的，如果为ture，是可以看到的。这块内容只会在指令的表达式返回真值时才被渲染。另一个可以用来按条件显示一个元素的指令是 v-show。简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS。有更高的初始渲染开销。因此，如果需要频繁切换，则使用。的时候，是不会不渲染出来的。有更高的切换开销，而。
2025-01-08 09:13:33
284
原创 前端流行框架Vue3教程：2. Vue模板语法（2）属性绑定
布尔型 attribute 依据true / false 值来决定 attribute 是否应该存在于该元素上，双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用。如果你有像这样的一个包含多个 attribute 的JavaScript对象。，那么该 attribute 将会从渲染的元素上移除。我们这时候看到，tittle属性都不存在了。非常常用，我们提供了特定的简写语法。attribute 与组件的。指令指示 Vue 将元素的。
2025-01-07 14:13:10
388
原创 前端流行框架Vue3教程：2. Vue模板语法（1）文本插值
Vue 使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码。一个简单的判断方法是是否可以合法地写在return后面。双大括号将会将数据插值为纯文本，而不是HTML。若想插入HTML，你需要使用。App.vue`的代码全部删除。我们发现，页面并没有识别出来。最基本的数据绑定形式是文本插值，它使用的是。
2025-01-06 14:28:46
441
原创 前端流行框架Vue3教程：1. Vue开发前的准备（安装、开发环境和目录结构）
安装后会有下列提示，除了创建名称外，其他的暂时选否。这时候如果有些人会报错，证书过期不能访问之类的。重新安装install即可（会非常快）~~~~安装淘宝镜像记录：管理员运行cmd。我们就看到项目创建运行成功了。推荐的是IDE配置是。
2025-01-05 11:01:55
299
原创 Python高性能web框架-FastApi教程：（20）CORS组件实现跨域请求
跨源资源共享（CORS）是一个安全特性，允许或限制网页上的资源可以被另一个域名的网页访问。在 API 开发中配置 CORS 是常见需求，尤其是当你的前端和后端部署在不同的域时。我们之前所写的fastapi请求，都是同源请求。这个时候，就允许网页上的资源可以被另一个域名的网页访问。这三个要素但凡有一个不一致，那么这次发送的请求就是。下面是一个最简单的fastapi的同源请求。// 响应`main.py`里的函数返回值。// 请求成功后，在控制台输出用户信息。我们发现，请求被阻止了。根据代码来看，我们点击。
2025-01-03 11:57:39
443
原创 Python高性能web框架-FastApi教程：（19）中间件
添加这块代码的时候，我们发现连测试文档都进不去了。要创建中间件你可以在函数的顶部使用装饰器。传递给应用程序的其他部分 (通过某种。做一些事情或者执行任何需要的代码.我们测试另一个路由的时候，是正常的。做些什么或者执行任何需要的代码.它接收你的应用程序的每一个。然后它获取应用程序生产的。处理之前,以及在每个。
2025-01-02 09:15:40
423
原创 Python高性能web框架-FastApi教程：（18）ORM操作之编辑接口开发（更新记录和删除记录）
这些是我们更新的id和内容，其中’courses’字段被字典删除了，可以忽略这个去添加了。运行测试后，我们发现不仅学生删除了，而且有关该学生的2个选课一并都删除了。正常来说，更新简单一对一、一对多记录就是如此。是多对多的，所以不能被更新！这边看到了更新了2个课程。那么，我们怎么添加呢？数据库中看到了更新。
2025-01-01 09:09:47
294
原创 Python高性能web框架-FastApi教程：（17)ORM添加表记录
我们需要先写一个数据校验模型，学生信息输入模型。该模型用于验证学生信息，包括姓名、密码、学号、班级和课程列表。这边自行改为正确的即可。
2024-12-31 09:34:41
395
原创 Python高性能web框架-FastApi教程：（16)ORM响应页面数据
不过，这个页面有点丑，我们想做个漂亮的页面。引入一个比较喜欢的表格。
2024-12-30 09:56:45
697
原创 Python高性能web框架-FastApi教程：（15) ORM查询操作
现在，我们就需要通过这些外键id去添加其他数据了。，Student.all前加个。这个时候就打印出来了！可以看出，数据类型是。我们需要在函数前加个。
2024-12-29 09:12:34
629
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人