Vue中的动画封装 JS

Vue中的动画封装

如果我们想多次使用某个动画效果,我们可以给它做一个封装,以达到复用的效果。 首先 我们把效果写在子组件的模板里: Vue.component('child',{         t...
阅读全文
Vue中的列表过渡 JS

Vue中的列表过渡

目前为止,关于过渡我们已经讲到: 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-gro...
阅读全文
Vue中多个元素或组件的过渡 JS

Vue中多个元素或组件的过渡

之前写过是一个元素的出场/离场过渡,那么如果是多个元素的过渡以及多个组件的过渡效果要怎么来写呢? 多个元素过渡 我们现在使用两个p标签,其中包含2段文字,来看一下他们的过渡效果: ...
阅读全文
Vue动画中的JS钩子 JS

Vue动画中的JS钩子

这些钩子可以在transition属性中声明就可以了,具体有哪些钩子呢? before-enter 在即将显示的时候触发,并且会接收一个el的参数,el参数为transition属...
阅读全文
Vue中同时使用动画和过渡 JS

Vue中同时使用动画和过渡

之前写的两篇介绍动画和过渡的文章,一篇说的是使用动画,一篇说的是使用过渡效果,本文写一下初始渲染的过渡效果以及同时使用动画和过渡的效果: 初始渲染的过渡 一般情况下,我们默认打开页...
阅读全文
Vue中css动画过渡效果(一) JS

Vue中css动画过渡效果(一)

我们在很多地方看到过,图片或者文字的淡入淡出效果,那么是怎么做到的呢? Vue 提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡,我们只需...
阅读全文
Vue动态组件与v-once指令 JS

Vue动态组件与v-once指令

有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里,点击组件A显示组件A的内容,点击组件B显示组件B的内容,要怎么来做呢? 动态组件 先看一下基础的写法: ...
阅读全文
Vue中使用插槽(二) JS

Vue中使用插槽(二)

  上篇文章写到了基础插槽,默认文字以及具名插槽,本文来说一下作用域插槽,有时让插槽内容能够访问子组件中才有的数据是很有用的。 作用域插槽 设想一个带有如下模板的chil...
阅读全文
Vue中使用插槽(一) JS

Vue中使用插槽(一)

Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将slot元素作为承载分发内容的出口。那么具体要怎么用呢? 不使用slo...
阅读全文