>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 15956 个阅读者 刷新本主题
 * 贴子主题:  彻底明白VUE中的done参数和函数作用 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2024-04-20 09:14:04     消息  查看  搜索  好友  邮件  复制  引用

最近在学习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接口就没法被调用了。

原文链接:https://blog.csdn.net/wzj26638719/article/details/103936381
作者:发扬光大


程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->操作符
  JavaWeb开发-->Servlet技术详解(Ⅲ)
  JSP与Hibernate开发-->映射对象标识符
  Java网络编程-->基于MVC和RMI的分布式应用
  精通Spring-->组合(Composition)API
  Vue3开发-->通过Vuex进行状态管理
  不可错过的几种JS优化技巧
  qs.parse()、qs.stringify()、JSON.stringify() 用法及区别
  本以为精通Vue,没想到被前阿里大佬虐哭了......
  基于vue-element-admin 的权限管理
  Velocity.js动画库的使用
  Vue选项的用法
  用Vue-Awesome-Swiper实现旋转叠加轮播效果,平移轮播效果
  14个JavaScript优化建议
  JavaScript中的HTML DOM Button 对象
  CSS3 多列布局
  CSS3 文本效果
  CSS 表单的用法
  HTML 区块:div和span元素
  HTML 基础知识
  JavaScript基础入门
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。