<!DOCTYPE html>

<html>
 
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
 
<body>
 
    <div id="app">
        <p>{{ message }}</p>
        <button @click="btn">改变按钮</button>
    </div>
 
    <script type="text/javascript">
        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) //undefined
            },
            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)
            },
            methods: {
                btn: function() {
                    this.message = "change"
                }
            }
        })
    </script>
</body>
 
</html>

VUE生命周期demo的更多相关文章

  1. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  2. Vue生命周期钩子---3

    vue生命周期流程图:4张图 : 生命周期的解析和应用: Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue ...

  3. vue 生命周期的详解

    一.vue生命周期的解析 > 1>什么是vue生命周期 每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...

  4. vue生命周期的介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. vue 生命周期

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...

  6. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

  7. 关于vue生命周期

    官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...

  8. vue生命周期的理解

    我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...

  9. Vue生命周期，面试常见问题

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

随机推荐

  1. java对象的几种创建过程

    java对象的创建过程 (1)用new 语句创建对象,这是最常用的创建对象方法. 下面用一个简单的存在继承关系的实例的创建,来叙述对象创建过程中的细节 概括如下: 执行顺序:(优先级从高到低.)静态代 ...

  2. Docker简易使用手册

    1. Docker介绍 Docker中文社区文档 Docker 是一个开源的软件部署解决方案. Docker 包括三个基本概念: 镜像(Image) Docker的镜像概念类似于虚拟机里的镜像,是一个 ...

  3. k8s的一些基本命令

    kubernetes用到的一些命令 kubectl管理工具以及命令 基础命令:create,delete,get,run,expose,set,explain,edit. create命令:根据文件或 ...

  4. python 短信邮件

    短信邮件 hashlib​- md5:非对称加密,不可逆的,经常用于加密密码然后存储​- 示例:​ ```python import hashlib ​ # 创建hash对象,可以指定需要加密的字符串 ...

  5. ubuntu修改apt源

    1.修改之前首先做好备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 2.编辑源列表文件 sudo vim /etc/apt/sou ...

  6. PHP--API

    PHP所有能力都是函数,内置1000多个函数,不是每一个函数都默认直接可以使用,有一些需要安装或者启用额外的“插件”扩展. 1,获取字符串长度 <?php $str='hello'; echo ...

  7. JS通过sort(),和reverse()正序和倒序

    sort()正序   var array1 = [0,1,5,10,15]; array1.sort();//结果为:0,1,10,15,5   请注意,上面的代码没有按照数值的大小对数字进行排序,要 ...

  8. java复制文件范例代码

    String url1 = "F:\\SuperMap-Projects\\region.udb";// 源文件路径 try { for(int i=1;i<101;i++) ...

  9. 18、nginx优化

    一.性能优化概述 基询imm能优化,那么在性能优化这一章,我们将分为如下几个方面做介绍 1.首先我们需要了解性能优化要考虑哪些方面. 2.然后我们需要了解性能优化必须要用到的压力测试工具ab. 3.最 ...

  10. python动态添加属性

    class A: def __init__(self, info ={}): self.info = info def __getattr__(self, item): return self.inf ...