vue的生命周期钩子函数

zhan11400
字数 6250阅读 112

vue的生命周期钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="button" @click="show()" value="按钮">
    <input type="button"  @click="msg='no'" value="按钮">
    <div id="aaa">{{msg}}</div>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script>
    var vm = new Vue({
            el: '#app',
            data: {
                msg: '111'
            },
            methods:{
                show:function () {
                    console.log('执行了show')
                }
            },
            beforeCreate(){//表示实例完全被创建出来之前先执行它,data,methods都还没初始化
                console.log('执行了beforeCrete ')
            },
            created(){//这里data,methods已经初始化,实例化的时候自动执行
                console.log(this.msg)
            },
            beforeMount(){ //模板已经全部编译完成,但是还没渲染
                console.log('beforeMount'+document.getElementById("aaa").innerHTML) //值返回了{{msg}},还没渲染
            },
            mounted(){//模板已经全部编译完成,渲染完成,挂载完成
                console.log('mounted'+document.getElementById("aaa").innerHTML) //返回了 111
            },
            beforeUpdate(){//data的数据已经更新,但是HTML的数据还没更新
                console.log('beforeUpdate'+document.getElementById("aaa").innerHTML) //返回了 111
            },
            updated(){//data的数据已经更新,HTML的数据也更新
                console.log('updated'+document.getElementById("aaa").innerHTML) //返回了 no
            },
            beforeDestroy(){//vue实例从运行阶段到销毁阶段,还没真正执行销毁
                console.log('beforeDestroy+'+this.msg+document.getElementById("aaa").innerHTML)
            },
            destroyed(){//整个实例全部销毁,包括数据,方法,指令,过滤器等
                console.log('destroyed+'+this.msg)
            }
        })
      //  vm.$destroy()
</script>
</body>
</html>


0条评论
    暂无评论
发表评论