彻底明白VUE中的done参数和函数作用,不懂的请进来
最近在学习vue.js发现钩子函数这一块,有一个done函数,莫名奇妙难懂,网上翻遍了,整了3个多小时,才弄明白怎么回事。
所以特地写下一个超简单的示例供学习者理解参考。不多说,上代码:后面有图解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue done</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="test">
<button @click="show=!show">点我有讲解</button>
<transition v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterXianshi"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterXiaoshi"
v-bind:css="false">
<p v-if="show">
VUE菜鸟教程 - done函数作用讲解-作者QQ 4-9-8-3-5-777-9
</p>
</transition>
</div>
<script>
var vm = new Vue({
el: '#test',
data: {
show: false
},
methods: {
beforeEnter: function(el) {
console.log("显示之前 beforeEnter 函数被调用");
alert("显示之前 beforeEnter函数被调用");
},
enter: function(el, done) {
console.log("enter");
alert("现在正在执行enter函数代码,你可以在这里写各种动画实现显示效果……");
// 显示过程的动画运行结束了,可以使用done()通知VUE去执行after-Leave函数了(假如有)
done(); // 调用这个系统函数,就是告诉vue,动画结束了,如果注释,就不会调afterXianshi
},
afterXianshi: function(el) { //这里我们把钩子函数enter后的afterenter函数写上
console.log("after-enter");
console.log("----------");
alert("这是 afterXianshi(显示) 函数弹出来的框");
},
beforeLeave: function(el, done) {
console.log("消失之前 beforeLeave 函数被调用");
alert("显示之前 beforeEnter函数被调用");
},
leave: function(el, done) {
console.log("leave");
alert("现在正在执行leave函数代码,你可以在这里写各种动画实现消失效果……");
// 消失的动画运行结束了,可以使用done()通知VUE去执行after-Leave函数了(假如有)
done(); // 调用这个系统函数,就是告诉vue,动画结束了,如果注释,就不会调afterXiaoshi
},
afterXiaoshi(el){
console.log("after-leave");
alert("这是 afterXiaoshi(消失) 函数弹出来的框");
console.log("");
}
}
})
</script>
</body>
</html>
以下为运行效果:
总结:
当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。
如果形参不指定 done ,则表明用户不手动控制动画的结束,而转由节点的transition或者animationEnd 来标识动画结束,开始回调 afterEnter。
钩子函数的形参的个数大于1,表示形参中有done, 也就是说用户必须手动控制动画何时结束。所以一旦你配置了done形参,则转由你告诉框架,动画何时结束。需要在合适的时机调用done,否则 afterEnter接口就没法被调用了。
彻底明白VUE中的done参数和函数作用,不懂的请进来相关推荐
- scala中命名参数函数_Scala中带有命名参数的函数
scala中命名参数函数 具有命名参数的函数 (Functions with named arguments ) A function is Scala can take multiple argum ...
- python函数如何实现可变参数_【已解决】Python中实现可变参数的函数
[问题] Python中,希望实现一个可变参数的函数. [解决过程] 相关代码如下:(extractOK, extractedBlogUser, generatedBlogEntryUrl) = ca ...
- Vue中的Diff算法 patch函数-简单Diff算法-双端Diff算法-快速Diff算法-当数据发生改变,视图如何更新?
文章目录 Vue中的Diff算法 概述 前置知识 patch方法 简单Diff算法 总结 双端Diff算法 --vue2 快速Diff算法 --vue3 vue2和vue3 Diff算法的区别 当数据 ...
- Vue中props传递参数(父传子)
父组件要正向地向子组件传递数据或参数,子组件收到后,根据传递过来的数据不同,渲染不同的页面内容,或者执行操作. 这个正向传递数据的过程是通过props来实现的.子组件使用props来声明需要从父组件接 ...
- vue中获取url参数
1.路由获取 this.delivery_asn = this.$route.query.delivery_asn; 2.非路由获取 (1)在js文件中写方法 export function getU ...
- 在maltab中画带参数的函数图像
先给大家看一个很简单的例子,大家也许就知道怎么做了 syms a x f = sin(x + a); f1 = subs(f, a, 0); ezplot(f1, [0,4*pi]); figure; ...
- 前端框架Vue中各个文件夹的具体作用简介
对于部分前端入门的同学而言,了解使用Vue框架创建项目中各个文件夹的作用是十分必要的.下面对各个文件夹的作用进行一个简单的介绍: node_modules 是用于存放项目所需要的依赖. public文 ...
- java 重载 参数子类_java - Java中带有子类参数的函数重载 - 堆栈内存溢出
这个问题已经在这里有了答案: 我有一个扩展了另一个类的类(在这种情况下,这是一个例外): public class NewTypeException extends Exception { priva ...
- “约见”面试官系列之常见面试题之第七十五篇之vue中如何使当前css起作用(建议收藏)
方法很简单,在组件中的style前面加上scoped就可以了,示例: 本面试题为前端常考面试题,后续有机会继续完善.我是歌谣,一个沉迷于故事的讲述者. 欢迎一起私信交流. "睡服" ...
最新文章
- Python ATM
- 中国博士把整个 CNN 都给可视化了,每次卷积 ReLU 池化都清楚
- 浅谈主动学习(Active Learning)
- 又重装了系统win8+office2013+sql2012+tfs2012+vs2010+vs2012+xna4+kinectsdk1.6+wp8sdk
- python做一个考试系统_1218Python基于Django在线考试系统设计
- JAVA实现N皇后问题(回溯法)
- NAND FLASH分区规划
- Hyper-v下安装第一台Windows Server 2012 R2
- Spring Data Jpa出现“Table ‘XXX.hibernate_sequence‘ doesn‘t exist”
- xml.dom.minidom 利用hbm.xml批量生成db2注释
- Hicharts实现世界地图思路及踩过的坑(含中文GeoJSON数据集及详细代码)
- 12864液晶中文资料JHD529m1
- 2022谷粒商城学习笔记(二十五)支付宝沙箱模拟支付
- 如何把Word文件设置成不能编辑
- 【吐血整理】一份完备的集成学习手册!(附Python代码)
- android app 隐藏应用,教你一招,隐藏我们手机中的APP应用!
- 集合类 Java中的集合类解析和一些有深入的面试题
- 夜明け前より瑠璃色な 攻略
- 一道CF送命题引发的博文
- 网管软件禁止网购木马偷梁换柱