vue中生命周期函数

最新推荐文章于 2024-10-18 15:58:53 发布

贺今宵

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量312

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_51389137/article/details/122286431

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

定时器过渡动画

<body>
    <div id="d1">
        <span :style="{opacity:op}">生命周期{{op}}</span><br>
        <button @click='stop'>点击变换</button>
        <button>点击停下</button>
    </div>
    <script>
        new Vue({
            el:'#d1',
            data:{
             op:'0.51',
            },
            //方法函数，所有绑定的函数
            methods: {
           stop(){
               console.log('d');
               this.$destroy()              
           }
            },
            //mounted(){}//vue完成模板解析生成真实DOM后挂载完毕后调用
    // 一般在此发送网络请求，订阅消息，开启定时器，绑定自定义事件等初始化操
            mounted() {
                //定时器箭头函数
   this.opstop= setInterval(()=>{
 this.op -=0.01;
 if(this.op<=0)this.op=1
    },16)
    
            },
//             销毁程序之前，关闭定时器，订阅解绑自定义事件
//    该函数和周期之后所有对数据的更新不触发
//    销毁后事件的失效都是自定义事件，原生的DOM事件不销毁
//    函数写在beforeDestroy()中调用this.destroy()执行整个，销毁前
            beforeDestroy() {
                console.log('dj');
                //清除定时器
               clearInterval(this.opstop)
            },
        })
    </script>
</body>