lovecoding
/
W0407


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
							<!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: {
                aa() {
                    console.log("你好")
                },
                changeMsg() {
                    this.msg = '哈哈哈'
                }
            },
            mounted() {
                console.log("挂载后", this.$el)
            },
            beforeMount() {
                console.log("挂载前", this.$el)
            },
            created() {
                console.log(this.$el)
                console.log("创建后", this.msg)
            },
            beforeCreate() {

                console.log(this.$el)
                console.log("创建前", this.msg)
            },
            beforeUpdate() {
                console.log("更新前",this.$el,document.querySelector("h1").innerText)
            },
            updated() {
                console.log("更新后",this.$el,document.querySelector("h1").innerText)
            },
            beforeDestory() {
                console.log("销毁前")
            },
            destoryed() {
                console.log("销毁后")
            }
        })
    </script>
</body>

</html>