vue基础---10生命周期

00.生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <h1 :class="className">hello</h1>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello vue",
                className:"active"
            },
            beforeCreate(){//创造前
                // 数据data和方法methods还未绑定到应用对象app上
                console.log('beforCreate');
            },
            created(){//创造
                // 数据data和方法methods绑定到应用对象app上
                console.log('created');                
            },
            beforeMount(){//渲染前
                //根据数据生成的DOM对象是获取不到的
                console.log('beforeMount');
            },
            mounted(){//渲染
                console.log('mountd');
            },
            methods:{
                clickEvent:function(){    
            }
            },
            beforeUpdate() {
                //数据更改,但内容未更改之前
                console.log('beforeUpdate')
            },
            updated() {
                //内容已更新完毕
                console.log('update')
            },
            beforeDestroy() {
                //应用销毁之前
                console.log("beforeDestory")
            },
            destroyed(){
                //应用销毁之后
                console.log("Destory")
            }    
　　　　　　　activated（）{
　　　　　　　　　　//keep-alive进入
　　　　　　　}
　　　　　　　deactivated（）{    
　　　　　　　　　　//keep-alive离开
　　　　　　　}

        })
    </script>
</body>
</html>

posted @ 2021-09-10 12:03 !ment 阅读(122) 评论(0) 编辑收藏举报

刷新页面返回顶部

目录

!ment

vue基础---10生命周期