lovecoding
/
web0715


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<!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>
    <div id="app">
        <!-- 
        vue diff 算法 DOM虚拟树 DOM真实树
        生命周期 => 生命周期钩子
         三个阶段
            1.初始阶段
            创建前  beforeCreate 方法和数据是无法被使用的 
            创建后  created 方法和数据可以使用
            2.运行阶段
            挂载前  beforeMount 方法和数据是没有被挂载到页面上
            挂载后  mounted  方法和数据是被挂载到页面上
            更新前  beforeUpdate 方法和数据是没有被更新到页面上
            更新后  updated  方法和数据是被更新到页面上
            3.销毁阶段
            销毁前  beforeDestroy 方法和数据是没有被销毁
            销毁后  destroyed  方法和数据是被销毁
        -->
         <h1>{{msg}}</h1>
         <button v-on:click="getMsg">修改</button>
         <button v-on:click="getShow">展示</button>
    </div>
    <script src="../vue初阶/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"你好"
            },
            methods:{
                getMsg() {
                    this.msg = "世界";
                },
                getShow() {
                }
            },
            beforeCreate() {
                // console.log(this.msg,this.$el,this.getMsg(),'1')
            },
            created() {
                // console.log(this.msg,this.$el,this.getMsg(),'2')
            },
            beforeMount() {
                console.log(this.msg,this.$el,'3')
            },
            mounted() {
                console.log(this.msg,this.$el,'4')
            },
            beforeUpdate() {
                console.log(this.msg,document.querySelector("h1").innerHTML,'5')
            },
            updated() {
                console.log(this.msg,document.querySelector("h1").innerHTML,'6')
            },
            beforeDestroy() {
                console.log(this.$el,'7')
            },
            destroyed() {
                console.log(this.$el,'8')
            },
        })
    </script>
</body>
</html>