lovecoding
/
web0331


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        三个阶段：8个
            初始：
                beforeCreate  创建前  方法和数据 都无法被调用
                created       创建后  方法和数据 都可以被调用
            运行：
                beforeMount   挂在前  页面数据并没有更新到视图上 对当前DOM操作无效
                mounted       挂在后  页面更新到视图上  对DOM操作生效
                beforeUpdate  更新前  视图变化 数据未更新
                updated       更新后  视图变化 数据更新
            销毁：
                beforeDestory 销毁前  对DOM操作无效
                destoryed     销毁后  彻底销毁
    -->
    <div id="app">
        <div id="hi">{{msg}}</div>
        <button @click="changeMain">改变</button>
    </div>
    <script src="./vue.js"> </script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"你好"
            },
            beforeCreate() {
                console.log(this.msg,'1')
            },
            created() {
                console.log(this.msg,'2',this.getMain())
            },
            beforeMount() {
                console.log(this.msg,'3',this.$el)
            },
            mounted() {
                console.log(this.msg,'4',this.$el)
            },
            beforeUpdate() {
                console.log(this.msg,'5',this.$el,document.getElementById("hi").innerHTML)
            },
            updated() {
                console.log(this.msg,'6',this.$el,document.getElementById("hi").innerHTML)
            },
            methods:{
                getMain() {
                    console.log("今天")
                },
                changeMain() {
                    this.msg = '新的'
                }
            }
        })
    </script>
</body>

</html>