Vue中的动画封装 JavaScript

Vue中的动画封装

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

Vue中的列表过渡

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

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

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

Vue中同时使用动画和过渡

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

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

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

Vue动态组件与v-once指令

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

Vue中使用插槽(二)

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

Vue非父子组件间传值

组件通信有三种情况,父组件向子组件传值,子组件向父组件传值,这两种我们称为父子组件通信,还有一种就是非父子组件通信。 非父子组件通信 在简单的场景下,我们可以使用一个空的Vue实例...
阅读全文
Vue组件绑定原生事件 JavaScript

Vue组件绑定原生事件

vue组件绑定原生事件?正常情况下我们想给一个组件绑定事件需要这样来写,首先需要通过$emit向上触发事件,然后监听事件,最后才会执行方法函数,比如下面这样的: <div i...
阅读全文
Vue中父子组件传值 JavaScript

Vue中父子组件传值

父组件向子组件传递数据可以通过props接收然后去处理,子组件向父组件传递数据可以通过$emit事件触发的形式传递。 父组件向子组件传递数据 <div id="root"&g...
阅读全文
Vue组件使用中的细节点 JavaScript

Vue组件使用中的细节点

细节点是什么?指一些平时可能没有太注意,但是用处很大的小地方,毕竟千里之堤毁于蚁穴。 使用is 有时候我们会遇到子组件填充表格数据的情况,这个时候我们需要先定义全局组件(row),...
阅读全文