zoukankan      html  css  js  c++  java
  • vue 生命周期

    var app = new Vue({
    el: '#app',
    data: {
    message: "xuxiao is boy"
    },
    beforeCreate: function () {
    console.group('beforeCreate 创建前状态===============》');
    console.log("%c%s", "color:red", "el : " + this.$el); //undefined
    console.log("%c%s", "color:red", "data : " + this.$data); //undefined
    console.log("%c%s", "color:red", "message: " + this.message)
    },
    created: function () {
    console.group('created 创建完毕状态===============》');
    console.log("%c%s", "color:red", "el : " + this.$el); //undefined
    console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
    console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
    },
    beforeMount: function () {
    console.group('beforeMount 挂载前状态===============》');
    console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化
    console.log(this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
    console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
    },
    mounted: function () {
    console.group('mounted 挂载结束状态===============》');
    console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
    console.log(this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
    console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
    },
    beforeUpdate: function () {
    console.group('beforeUpdate 更新前状态===============》');
    console.log("%c%s", "color:red", "el : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
    },
    updated: function () {
    console.group('updated 更新完成状态===============》');
    console.log("%c%s", "color:red", "el : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
    },
    beforeDestroy: function () {
    console.group('beforeDestroy 销毁前状态===============》');
    console.log("%c%s", "color:red", "el : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
    },
    destroyed: function () {
    console.group('destroyed 销毁完成状态===============》');
    console.log("%c%s", "color:red", "el : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message)
    }
    })
  • 相关阅读:
    Charles网络工具
    查找最长子串的长度(不重复字符)
    KMP算法
    java并发编程实战:第十四章----构建自定义的同步工具
    java并发编程实战:第十二章---并发程序的测试
    java并发编程实战:第二章----线程安全性
    java并发编程实战:第三章----对象的共享
    java并发编程实战:第四章----对象的组合
    java并发编程实战:第五章----基础构建模块
    java并发编程实战:第六章----任务执行
  • 原文地址:https://www.cnblogs.com/yimuzanghua/p/8808165.html
Copyright © 2011-2022 走看看