查看生命周期图

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta http-equiv="content-type" content="text/html" charset="UTF-8">

    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>

</head>

<body>

<div id="app">

    <input type="text" v-model="message1">

    <p>{{ message }}</p>

</div>

<script type="text/javascript">

    var app = new Vue({

        el: '#app',

        data: {

            message : "哎呦，不错哦！",

            message1:""

        },

        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)

        }

    })

</script>

</body>

</html>

显示如下

Vue生命周期总结的更多相关文章

  1. vue生命周期的介绍

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

  2. vue 生命周期

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

  3. 详解vue生命周期

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

  4. 关于vue生命周期

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

  5. vue生命周期的理解

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

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

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

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

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

  8. 面试题之（vue生命周期）

    在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...

  9. [转] Vue生命周期

    Vue生命周期 这是Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </sectio ...

  10. vue生命周期、钩子函数

    https://segmentfault.com/a/1190000011381906    详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...

随机推荐

  1. DOM案例五星评分控件

    模仿网页上评分的五个五星. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  2. Codeforces Round #407 (Div. 2) D,E

    图论 D. Weird journey time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  3. scrapy架构设计分析

    scrapy是一个Python爬虫框架.我们自己用requests也能写爬虫(GET某个URL,然后Parse网页的内容),那么,问题来了,scrapy高明在哪些地方呢?下面就来讨论下这个话题,看看业 ...

  4. Android核心类源码分析

    Handler流程1.首先Looper.prepare()在本线程中保存一个Looper实例,然后该实例中保存一个MessageQueue对象:因为Looper.prepare()在一个线程中只能调用 ...

  5. CMDB服务器管理系统【s5day88】：采集资产之整合插件

    以后导入配置文件不用去from conf而是导入from lib.config,因为在这可以导入global_settings和settings.py import sys import os imp ...

  6. 代码Review发现问题

    FrmMain.cs中存在问题 1. int i=0 设定为了全局常量且未在类顶部,出现问题时不好查找 i 属于常用临时变量,设定全局变量容易引起混乱 2.定义的全局变量但仅在一处方法中使用,定义全局 ...

  7. 【设计模式】 模式PK：抽象工厂模式VS建造者模式

    1.概述 抽象工厂模式实现对产品家族的创建,一个产品家族是这样的一系列产品:具有不同分类维度的产品组合,采用抽象工厂模式则是不需要关心构建过程,只关心什么产品由什么工厂生产即可.而建造者模式则是要求按 ...

  8. 【poj2182】【poj2828】树状数组/线段树经典模型：逆序查找-空位插入法

    poj2182题意:有一个1~n的排列,现在给定每个人前面有多少个人的编号比他大,求这个排列是什么.n<=8000 poj2182题解: 逆序做,可以确定二分最后一个是什么,然后删除这个数.树状 ...

  9. 【NOIP】提高组2015 运输计划

    [题意]n个点的树,m条链,求将一条边的权值置为0使得最大链长最小. [算法]二分+树上差分 [题解] 最大值最小化问题,先考虑二分最大链长. 对所有链长>mid的链整体+1(树上差分). 然后 ...

  10. js 重置表单

    //方法一document.getElementById("myform").reset(); //方法二 ].reset(); //方法三 使用input按钮 <input ...