- 博客(12)
- 收藏
- 关注
RSS订阅原创 VUE3 异步组件
如果提供了一个加载组件，它将在内部组件加载时先行显示。在加载组件显示之前有一个默认的 200ms 延迟——这是因为在网络状况较好时，加载完成得很快，加载组件和最终组件之间的替换太快可能产生闪烁，反而影响用户感受。是一个外层包装过的组件，仅在页面需要它渲染时才会调用加载内部实际组件的函数。它会将接收到的 props 和插槽传给内部组件，所以你可以使用这个异步的包装组件无缝地替换原始组件，同时实现延迟加载。如果提供了一个报错组件，则它会在加载器函数返回的 Promise 抛错时被渲染。
2024-06-08 19:18:44
496
原创 VUE3 组合式函数
在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多，比如你可能已经用过的lodash或是date-fns。相比之下，有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。
2024-06-08 19:17:07
885
原创 VUE3 生命周期钩子
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。时，Vue 会自动将回调函数注册到当前正被初始化的组件实例上。下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是。也可以在一个外部函数中调用，只要调用栈是同步的，且最终起源自。
2024-06-08 19:16:04
433
原创 VUE3 列表渲染
Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的。变更方法，顾名思义，就是会对调用它们的原数组进行变更。Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。
2024-06-07 07:15:22
1365
原创 VUE3 条件渲染
v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。template你也可以使用v-else为v-if添加一个“else 区块”。
2024-06-07 07:14:27
401
原创 VUE3 Class 与 Style 绑定
Class 与 Style 绑定数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为class和style都是 attribute，我们可以和其他 attribute 一样使用v-bind将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为class和style的v-bind用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。绑定 HTML class绑定对象
2024-06-06 11:08:52
1141
原创 VUE3 计算属性
更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。模板中的表达式虽然方便，但也只能用来做简单的操作。一个计算属性的声明中描述的是如何根据其他值派生一个值。若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于。计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。更重要的是，如果在模板中需要不止一次这样的计算，我们可不想将这样的代码在模板里重复好多遍。
2024-06-06 11:07:02
475
原创 VUE3 组件 v-model
这两个选项在从模型引用中读取或设置值时会接收到当前的值，并且它们都应该返回一个经过处理的新值。返回的值是一个 ref。值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，父组件的。小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个。把这个 ref 绑定到一个原生 input 元素上，在提供相同的。这里是另一个例子，展示了如何在使用多个不同参数的。在某些场景下，你可能想要一个自定义组件的。的返回值，可以在子组件中访问添加到组件。
2024-06-06 05:37:35
2960
原创 Element-UI框架的初入
你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。在引入 Element 时，可以传入一个全局配置对象。，你可以用它们快速地搭建一个基于 Element 的项目。，我们可以只引入需要的组件，以达到减小项目体积的目的。如果不希望使用我们提供的模板，请继续阅读。用于改变组件的默认尺寸，
2024-06-05 21:57:49
415
原创 VUE3 组件注册
此章节假设你已经看过了。若你还不了解组件是什么，请先阅读该章节。一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。
2024-06-05 20:28:39
994
原创 VUE3 表单输入绑定
在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：template指令帮我们简化了这一步骤：template另外，v-model还可以用于各种不同类型的输入，元素。valueinputcheckedchangevaluechange注意v-model会忽略任何表单元素上初始的valuechecked或selected。
2024-06-05 20:23:18
2158
黑苹果硬盘安装工具Leopard hd install helper v0.3
2024-06-06
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人