查看生命周期图

<!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. Qt -------- 多线程编程

    一.继承QThread(不推荐) 定义一个类,继承QThread,重写run(),当调用方法start(),启动一个线程,run()函数运行结束,线程结束. 二.继承QRunnable Qrunnab ...

  2. uboot 的命令体系

    1.代码位置 (1)uboot命令体系的实现代码在uboot/common/cmd_xxx.c中.有若干个.c文件和命令体系有关.(还有command.c  main.c也是和命令有关的) 2.传参方 ...

  3. leetcode 刷题日志 2018-3-28

    树: 404. 左叶子之和 求所有左叶子结点之和 . 递归法 分析:递归法遍历结点,找左叶子结点 空指针判断 有左子节点?是叶子结点?是的话更新value的值 int sumOfLeftLeaves( ...

  4. HDU 2154 跳舞毯 | DP | 递推 | 规律

    Description 由于长期缺乏运动,小黑发现自己的身材臃肿了许多,于是他想健身,更准确地说是减肥. 小黑买来一块圆形的毯子,把它们分成三等分,分别标上A,B,C,称之为“跳舞毯”,他的运动方式是 ...

  5. Mac 上真机调试cocos2d-x-3.16的test程序

    文章比较长,一个算是新手又不是新手的程序员的解决过程. 一 xcode中打开项目 首先,下载完成cocos2d-x-3.16之后,解压,然后在根目录build目录下双击cocos2d_tests.xc ...

  6. gridveiw的使用

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...

  7. css纯样式导航

    <style>.dropdown {    position: relative;    display: inline-block;} .dropdown-content {    di ...

  8. Bower A package manager for the web

    Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doe ...

  9. Python 模块搜索路径 -- (转)

    最近在看<Python源码剖析>,对Python内部运行机制比以前了解的更深入了,感觉自己有机会也可以做个小型的动态脚本语言了,呵呵,当然是吹牛了.目的当然不是创造一个动态语言,目的只有一 ...

  10. RecycleView Bug：java.lang.IndexOutOfBoundsException: Inconsistency detected.

    今天使用RecyclerView时,上下两个RecyclerView,在实现下拉刷新时,报错: java.lang.IndexOutOfBoundsException: Inconsistency d ...