lovecoding
/
VIP26


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!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">
        <div id="main">
            {{msg}}</div>
        <button @click="showMsg">按钮</button>
        <button @click="del">销毁</button>
        <!-- 
            vue 底层中diff算法 => DOM虚拟树 DOM真实树 
            生命周期：生命周期函数 生命周期钩子 生命周期回调函数
            生命周期的名字是不可以更改的
            三个阶段：
                创建阶段
                    1.beforeCreate 创建前：方法（methods） 和 数据（data）都是无法被调用
                    2.created      创建后：方法（methods） 和 数据（data）都是可以被调用
                运行阶段
                    3.beforeMount  挂载前：页面数据不会更新到视图里(没有通过vue编译) 对DOM操作无效
                    4.mounted      挂载后：页面渲染数据，并可以开始对DOM进行操作
                    5.beforeUpdate 更新前：数据改变 页面未更新
                    6.updated      更新后：数据改变 页面更新
                销毁阶段
                    7.beforeDestroy 销毁前：对DOM操作无效
                    8.destroyed     销毁后：彻底销毁
         -->
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"信息:看笔记"
            },
            methods:{
                showMsg() {
                    this.msg = "生命周期";
                },
                del() {
                    this.$destroy();
                }
            },
            beforeCreate() {
                console.log(this.msg,'创建前')
            },
            created() {
                console.log(this.$el,'创建后')
            },
            beforeMount() {
                console.log(this.$el,'挂载前')
            },
            mounted() {
                console.log(this.msg,'挂载后')
            },
            beforeUpdate() {
                console.log(this.$el,document.getElementById("main").innerHTML,'更新前')
            },
            updated() {
                console.log(document.getElementById("main").innerHTML,'更新后')
            },
            beforeDestroy() {
                console.log(this.$el,"销毁前")
            },
            destroyed() {
                console.log(this.$el,'销毁后')
            },
        })
    </script>
</body>
</html>