悬浮的青春 发布于 2023-01-11 16:54
Vue 常用系统指令 v-cloak v-text v-html
悬浮的青春 发布于 2022-10-10 17:50
本文就从 “详情卡片” 业务组件的封装的几个阶段来说明我在编写公共组件的设计思路
悬浮的青春 发布于 2022-09-14 13:59
本文主要记录了前端如何实现图片和视频的懒加载,并举例了第三方延迟加载库。
悬浮的青春 发布于 2022-09-02 16:29
我们可以从一个组件的外部通过给它一个 ref 用来调用一个方法。
// Somewhere in Parent.vue
this.$refs.child.method();
悬浮的青春 发布于 2022-09-02 16:21
v-for指令允许我们遍历数组,但它也允许我们遍历一个范围
Item #{{ n }}
渲染结果:
Item #1
Item #2
Item #3
Item #4
Item #5
当我们使用带范围的v-for时,它将从1开始,以我们指定的数字结束。
悬浮的青春 发布于 2022-09-02 16:14
有时我们需要知道插槽内的内容何时发生了变化。
不幸的是,Vue没有内置的方法让我们检测这一点。
然而,我的朋友Austin想出了一个非常干净的方法,使用MutationObserver来做这件事。
MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品,该功能是DOM3 Events规...
悬浮的青春 发布于 2022-09-02 16:13
我们可以在我们的组件中使用这一点来检测哪些插槽已经被应用到组件中,例如,通过隐藏插槽的包装元素。
A wrapped slot
现在,应用样式的包装器div只有在我们用某些东西填充这个插槽时才会被渲染。
如果不使用v-if,那么如果没有插槽,就会得到一个空的不必要的div。根据div的样式,这可能会打...
悬浮的青春 发布于 2022-09-02 16:10
限定范围的插槽非常有趣,但为了使用它们,您还必须使用许多模板标记。
幸运的是,有一个简写可以让我们摆脱它,但只有在我们使用单个作用域槽的情况下。
普通写法:
不使用 template:
<DataTable #header="tableAttributes">
<TableHeader v-...
悬浮的青春 发布于 2022-09-02 16:09
与其使用v-if,有时使用v-show来代替,会有更高的性能。
<ComplicatedChart v-show="chartEnabled" />
复制代码
当v-if被打开或关闭时,它将创建并完全销毁该元素。相反,v-show将创建该元素并将其留在那里,通过设置其样式为display: none来隐藏它。
如果你要切换的组...