当new的时候，就创建了一个vue实例，这个实例就是vue框架的入口，也是VM层

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./vue-2.5.16.js"></script>

</head>

<body>

  <div id="app">

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

    <h2>{{message}}</h2>

  </div>

  <script>

    var vm = new Vue({

      el: "#app",

      data: {

        message: 'my words'

      },

      beforeCreate() {

        console.group("beforeCreate");

        console.log("%c%s", "color:red", "el     : " + this.$el);

        console.log("%c%s", "color:red", "data   : " + this.$data);

        console.log("%c%s", "color:red", "message: " + this.message)

      },

      created() {

        console.group("created");

        console.log("%c%s", "color:red", "el     : " + this.$el);

        console.log("%c%s", "color:red", "data   : " + this.$data);

        console.log("%c%s", "color:red", "message: " + this.message)

      },

      beforeMount() {

        console.group("beforeMount");

        console.log("%c%s", "color:red", "el     : " + this.$el);

        console.log("%c%s", "color:red", "data   : " + this.$data);

        console.log("%c%s", "color:red", "message: " + this.message)

      },

      mounted() {

        console.group("mounted");

        console.log("%c%s", "color:red", "el     : " + this.$el);

        console.log("%c%s", "color:red", "data   : " + this.$data);

        console.log("%c%s", "color:red", "message: " + this.message)

      },

      beforeUpdate() {

        console.group("beforeUpdate");

        console.log("%c%s", "color:red", "el     : " + this.$el);

        console.log("%c%s", "color:red", "data   : " + this.$data);

        console.log("%c%s", "color:red", "message: " + this.message)

      },

      updated() {

        console.group("updated");

        console.log("%c%s", "color:red", "el     : " + this.$el);

        console.log("%c%s", "color:red", "data   : " + this.$data);

        console.log("%c%s", "color:red", "message: " + this.message)

      },

      beforeDestroy() {

        console.group("beforeDestroy");

        console.log("%c%s", "color:red", "el     : " + this.$el);

        console.log("%c%s", "color:red", "data   : " + this.$data);

        console.log("%c%s", "color:red", "message: " + this.message)

      },

      destroyed() {

        console.group("destroyed");

        console.log("%c%s", "color:red", "el     : " + this.$el);

        console.log("%c%s", "color:red", "data   : " + this.$data);

        console.log("%c%s", "color:red", "message: " + this.message)

      },

    })

  </script>

</body>

</html>

Vue.js（4）- 生命周期的更多相关文章

  1. Vue js 的生命周期详解

    Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...

  2. vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  3. Vue js 的生命周期（看了就懂）

    转自: https://blog.csdn.net/qq_24073885/article/details/60143856 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 首先先看看官网的图, ...

  4. Vue.js之生命周期

    有时候,我们需要在实例创建过程中进行一些初始化的工作,以帮助我们完成项目中更复杂更丰富的需求开发,针对这样的需求,Vue提供给我们一系列的钩子函数. vue生命周期 beforeCreate 在实例初 ...

  5. vue.js的生命周期 及其created和mounted的部分

    网上很多人有所总结,转载自: https://segmentfault.com/a/1190000008570622   关于created和mounted的部分,也可以参考: https://blo ...

  6. Vue.js——5.生命周期

    Vue的生命周期 创建阶段new Vue1,beforeCreate() 表示在实例没有被创建出来之前会执行它加载data和methods2,caeated() data 和methods被初始化了 ...

  7. 从零开始学 Web 之 Vue.js（三）Vue实例的生命周期

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  9. Vue.js-07：第七章 - Vue 实例的生命周期

    一.前言  在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...

  10. vue 项目实战 (生命周期钩子)

    开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个)        1. beforeCreate             刚 new了一个组件,无法访问到数据和真实的do ...

随机推荐

  1. vue-i18n多语言文件归类的两种方法

    1.按语言类型归类 流行的做法是按照语言对文件进行归类,目录结构类似于: --lang ----en ------test.json --------"abc": "ab ...

  2. Unity Reflection Probe使用入门

    贴官方API的说法: 反射探头: 一个反射探头很像一个相机,捕获了周围所有方向的球形视图.然后将捕获的图像存储为Cubemap,可由具有反射材料的对象使用.在给定场景中可以使用多个反射探测器,可以将对 ...

  3. Eclipse Unable to install breakpoint in XXX

    Eclipse  Unable to install breakpoint in  的问题, 到window-preferences-java-compiler下面 把Add line number  ...

  4. 官网英文版学习——RabbitMQ学习笔记（六）Routing

    有选择的接收消息. 上一节我们使用的是fanout exchange来实现消息的发布/订阅模式,这并没有给我们带来多大的灵活性——它只能够让人盲目地进行广播.而本节我们采用direct类型的交换器来实 ...

  5. arduino 通过串口接收string，int类型数据

    串口接收string类型数据源码如下 String comdata = ""; void setup() {     Serial.begin(9600); }   void lo ...

  6. Java多线程之Java内存模型

    如果要了解Java内存模型,就得对多线程的三大特性有初步的了解. 1.原子性:独一无二.一个操作或者多个操作 要么全部执行并且执行的过程不会被任何因素打断,要么就都不执行.比如i = i+1:其中就包 ...

  7. JVM探秘：JVM的参数类型

    本系列笔记主要基于<深入理解Java虚拟机:JVM高级特性与最佳实践 第2版>,是这本书的读书笔记. JVM的参数类型,大致可以分为标准参数.X参数.XX参数,而XX参数又可以分为Bool ...

  8. Spark 广播变量 和 累加器

    1. 广播变量 理解图 使用示例 # word.txt hello scala hello python hello java hello go hello julia hello C++ hello ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-share

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  10. 腾讯云Windows2016数据中文版环境搭建

    最近忙活了好几天,在腾讯云上买了台服务器,系统是Windows2016数据中文版,用于个人的学习,下面说一下整个流程吧. 遇到的问题: 一开始是按照腾讯云的指南文档去搞环境配置的,但它上面都是以Win ...