个人简介

Echo Blog


江湖无名 安心练剑
  • VUE3-26-mixins 混入
    基础 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。 一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 例子: // define a mixin object const myMixin = { created() { this.hello() }, methods...
    2021-08-02 13:01:55 | VUE
  • VUE3-25-状态过渡
    状态过渡 Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢,比如: 数字和运算 颜色的显示 SVG 节点的位置 元素的大小和其他的 property 这些数据要么本身就以数值形式存储,要么可以转换为数值。 有了这些数值后,我们就可以结合 Vue 的响应性...
    2021-08-02 13:01:55 | VUE
  • 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