lovecoding
/
W0407


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        
    四个阶段：
        初始：
            beforeCreate：data和methods不可用
            created:data和methods可用 DOM还未生成
        挂载：
            beforeMount 模版已编译 但没有挂载到页面上
            mounted Dom已生成 可以操作Dom
        更新：
            beforeUpdate 数据变化 Dom未更新
            updated 数据变化 Dom更新
        销毁：
            beforeDestory 实例还能用 
            destoryed 实例已销毁
    -->
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <button @click="changeMsg">修改</button>
    </div>
    <script src="../初阶/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "你好啊"
            },
            methods: {
                changeMsg() {
                    this.msg = '哈哈哈';
                    console.log(document.querySelector("h1").innerHTML, '111');
                    this.$nextTick(() => {
                        // 视图更新 数据未更新
                        console.log(document.querySelector("h1").innerHTML, '222');
                    })
                }
            },
        })
    </script>
</body>

</html>