-
VUE3-24-列表过渡
列表过渡
目前为止,关于过渡我们已经讲到:
单个节点
同一时间渲染多个节点中的一个
那么怎么同时渲染整个列表,比如使用 v-for?
在这种场景中,使用 <transition-group> 组件。
在我们深入例子之前,先了解关于这个组件的几个特点:
不同于 <transition>,它会以一个真...
2021-08-02 13:01:55 |
VUE
-
VUE3-23-进入过渡 & 离开过渡
进入过渡 & 离开过渡
在插入、更新或从 DOM 中移除项时,Vue 提供了多种应用转换效果的方法。
这包括以下工具:
自动为 CSS 转换和动画应用 class;
集成第三方 CSS 动画库,例如 animate.css ;
在过渡钩子期间使用 JavaScript 直接操作 DOM;
集成第三方 J...
2021-08-02 13:01:55 |
VUE
-
VUE3-22-过渡 & 动画概述
过渡 & 动画概述
Vue 提供了一些抽象概念,可以帮助处理过渡和动画,特别是在响应某些变化时。这些抽象的概念包括:
在 CSS 和 JS 中,使用内置的 <transition> 组件来钩住组件中进入和离开 DOM。
过渡模式,以便你在过渡期间编排顺序。
在处理多个元素位置更新时,使用 <transition-group> 组件,通过 FLIP 技术...
2021-08-02 13:01:55 |
VUE
-
VUE3-21-处理边界情况
处理边界情况
该页面假设你已经阅读过了组件基础。
如果你还对组件不太了解,推荐你先阅读它。
这里记录的都是和处理边界情况有关的功能,即一些需要对 Vue 的规则做一些小调整的特殊情况。
不过注意这些功能都是有劣势或危险的场景的。我们会在每个案例中注明,所以当你使用每个功能的时候请稍加留意。
控制更新
得益于其响应性系统,Vue 总是知道何时更新 (如果你使用正确的话)。
但是,...
2021-08-02 13:01:55 |
VUE
-
VUE3-20-模板引用
模板引用
该页面假设你已经阅读过了组件基础。
如果你还对组件不太了解,推荐你先阅读它。
尽管存在 prop 和事件,但有时你可能仍然需要直接访问 JavaScript 中的子组件。
为此,可以使用 ref attribute 为子组件或 HTML 元素指定引用 ID。
例如:
<input ref="input" />
例如,你希望以编程的方式 focus 这个 ...
2021-08-02 13:01:55 |
VUE
-
VUE3-19-动态组件 & 异步组件
在动态组件上使用 keep-alive
我们之前曾经在一个多标签的界面中使用 is attribute 来切换不同的组件:
<component :is="currentTabComponent"></component>
当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。
例如我们来展开说一说这个多标签界面:
&l...
2021-08-02 13:01:55 |
VUE
-
VUE3-18-提供/注入
提供 / 注入
该页面假设你已经阅读过了组件基础。
如果你还对组件不太了解,推荐你先阅读它。
通常,当我们需要将数据从父组件传递到子组件时,我们使用 props。
想象一下这样的结构:你有一些深嵌套的组件,而你只需要来自深嵌套子组件中父组件的某些内容。
在这种情况下,你仍然需要将 prop 传递到整个组件链中,这可能会很烦人。
对于这种情况,我们可以使用 provide 和 in...
2021-08-02 13:01:55 |
VUE
-
VUE3-17-插槽
插槽内容
Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口。
它允许你像这样合成组件:
<todo-button>
Add todo
</todo-button>
然后在 <todo-button> 的模板中,你可能有:
&l...
2021-08-02 13:01:55 |
VUE