• Vue第五篇 Vue的生命周期


    Vue生命周期简介

    生命周期的钩子函数

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
    
    </head>
    <body>
    <div id="app">
        <p>{{message}}</p>
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello gaoxin!!"
            },
            beforeCreate: function () {
                console.group("beforeCreate  创建实例之前===========");
                console.log("el: " + this.$el); // undefined
                console.log("data: " + this.$data); // undefined
                console.log("message: " + this.message);
            },
            created: function () {
                console.group("Created:  创建实例完成===========");
                console.log("el: " + this.$el); // undefined
                console.log("data: " + this.$data); // 已被初始化
                console.log("message: " + this.message); // 已被初始化
            },
            beforeMount: function () {
                console.group("beforeMount  挂载前状态==========");
                console.log("el: " + this.$el); // 已被初始化
                console.log("data: " + this.$data); // 已被初始化
                console.log("message: " + this.message); // 已被初始化
            },
            mounted: function () {
                console.group("Mounted  挂载结束状态=============");
                console.log("el: " + this.$el); // 已被初始化
                console.log("data: " + this.$data); // 已被初始化
                console.log("message: " + this.message); // 已被初始化
            },
            beforeUpdate: function () {
                console.group("beforeUpdate  更新前状态=========");
                console.log("el: " + this.$el);
                console.log("data: " + this.$data);
                console.log("message: " + this.message);
            },
            updated: function () {
                console.group("Updated  更新完成状态");
                console.log("el: " + this.$el);
                console.log("data: " + this.$data);
                console.log("message: " + this.message);
            },
            beforeDestroy: function () {
                console.group("beforeDestroy  实例销毁之前");
                console.log("el: " + this.$el);
                console.log("data: " + this.$data);
                console.log("message: " + this.message);
            },
            destroyed: function () {
                console.group("Destoryed  实例销毁之后");
                console.log("el: " + this.$el);
                console.log("data: " + this.$data);
                console.log("message: " + this.message);
            }
    
        })
    </script>
    
    
    </body>
    </html>
    
    生命周期钩子函数
    

      

    Vue的生命周期
    -- beforeCreate
    -- created
    -- beforeMount
    -- mounted
    -- beforeUpdate
    -- updated
    -- beforeDestroy
    -- destroyed
    node.js
    跑在本地的js解释器
    类比你下载Python

  • 相关阅读:
    编译JDK12
    Hexo Next背景动画Canvas_nest:true设置无效
    素数
    Linux 命令行样式
    四种排序算法实现
    Java中的简单容器
    一个关于2的次方问题
    LeetCode--20.有效的括号
    Java中的注释
    关于Metasploitable的测试
  • 原文地址:https://www.cnblogs.com/cavalier-chen/p/10096825.html
Copyright © 2020-2023  润新知