赞
踩
Vue组件
v-on 指令侦听
$on 侦听一个事件
$once 一次性侦听一个事件
$off 停止侦听一个事件
过渡 & 动画
transition组件控制过渡动画,可以给任何元素和组件添加进入/离开过渡
当插入或删除 transition中的元素时,vue会做如下处理
自动嗅探元素是否使用了css过渡和动画,适当时机添加/删除类名
元素的钩子函数会在适当时机被调用
元素既没有钩子函数也没有css动画,插入和删除操作在下一帧立即执行(浏览器逐帧动画机制)
过渡的类名
css动画用法同css过渡,区别是类名 v-enter不会在DOM插入后立即删除,而是在 animationend事件触发时删除
自定义过渡类名,使用以下属性指定:
使用 type属性设置 transition或 animation来申明vue使用的动画类型
transition组件上使用 duration来设置动画执行的时间
可以使用钩子函数
钩子函数使用 v-on指令绑定
钩子和结合过渡和动画使用,也可以单独使用
在 enter/leave中,必须使用 done()来进行回调,否则会同步调用,过渡或动画会立即完成
对于纯使用JavaScript来进行的动画,推荐使用 v-bind:css=“false”来取消css的检测,减少css的影响
可使用 apear设置初始渲染的过渡
多元素过渡,设置唯一 key
过渡模式:
列表排序过渡,使用的是 FLIP动画,使用类名 v-move来定义class
可复用性 & 组合
慎用全局混入
钩子函数
钩子函数都会被传入以下参数:
el 指令绑定元素,可操作DOM
binding 指令描述对象
vnode Vue生成的虚拟节点
oldVnode 上一个 Vnode,仅在 update和 componentUpdated中使用
指令接受所有合法的JavaScript表达式
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。