vue组件生命周期

最新推荐文章于 2024-07-20 23:54:17 发布

dede3535

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量62

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangruifang/p/7768137.html

版权

分为4个阶段：
create/mount/update/destroy
　　每一个阶段都对应着有自己的处理函数
　　　　create: beforeCreate created
　　初始化
　　　　mount: beforeMount mounted
　　和挂载相关的处理
　　　　update: beforeUpdate updated
　　根据要更新的数据做逻辑判断
　　　　destroy:beforeDestroy destroyed
　　清理工作

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>生命周期</title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
<!--点击的时候isShow进行取反  -->
        <button @click="isShow = !isShow">切换是否显示组件</button>
        <my-component v-if="isShow"></my-component>
    </div>
    <script>
        Vue.component("my-component",{
            template:`
                    <div>
                        <button @click="handleClick">Click Me</button>
                        <h1>component:{{count}}</h1>
                        </div>
            `,
            data:function(){
                    return {
                        count:0
                    }
                },
            methods:{
                handleClick:function(){
                    this.count++;
                }
            },
            beforeCreate: function () {
            console.log('准备创建组件');
        },
        created: function () {
            console.log('组件创建完毕');
        },
        beforeMount: function () {
            console.log('组件的模板准备挂载到DOM');
        },
        mounted: function () {
            console.log('挂载完毕');
        },
        beforeUpdate: function () {
            console.log('准备更新了');
        },
        updated:function(){
            console.log('更新完成');
        },
        beforeDestroy: function () {
            console.log('准备destroy');
        },
        destroyed: function () {
            console.log('destroy完成');
        }
        })
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs",
                isShow:true
            }
        })
    </script>
 </body>
</html>

生命周期练习，需要那阶段写那个阶段

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>生命周期练习</title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <my-component></my-component>
    </div>
    <script>
        Vue.component("my-component",{
            data:function(){
                return {
                    myOpacity:0
                }
            },
            template:` <h1 v-bind:style="{opacity:myOpacity}">透明度将改变
            </h1>`,
            mounted:function(){
                setInterval(function(){
                    this.myOpacity += 0.1;
                    if(this.myOpacity>1){
                        this.myOpacity = 0;
                    }
                }.bind(this),1000)
            }
        })
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

转载于:https://www.cnblogs.com/wangruifang/p/7768137.html

dede3535

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件生命周期

分为4个阶段：create/mount/update/destroy　　每一个阶段都对应着有自己的处理函数　　　　create: beforeCreate created 　　初始化　　　　mount: beforeMount mounted 　　和挂载相关的处理　　　　update: beforeUpdate updated 　　根据要更新的数据做逻辑判断　　　　destroy:b...
复制链接

扫一扫