当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. CentOS 6.5(x86_32)下安装Oracle 10g R2

    一.硬件要求 1.内存 & swap Minimum: 1 GB of RAMRecommended: 2 GB of RAM or more 检查内存情况 # grep MemTotal / ...

  2. 《分布式消息中间件实践》P153

    问题:我直接把作者的源码拷贝下来(包括xml,resource等,作者应该使用的是Eclipse,我复制到IDEA上),依赖加上.执行P153的步骤,报错如下: Exception in thread ...

  3. S7-200 smart输入输出接口试验

    工具 西门子 s7-200smart PLC 西门子s7-200 smart 试验 CPU型号是 SR30 这个 编译环境 符号 选择 了 "输入1"以后, 会自动的编地址为I0. ...

  4. springBoot (适合ssm)

    很多小白在学ssm的时候,选用idea,网上应该有很多教程,创建maven项目,创建spring项目的都有,五花八门. 最近接触了springBoot,这个项目类型适用于ssm,还不用去创建很多文件夹 ...

  5. netty权威指南学习笔记八——编解码技术之JBoss Marshalling

    JBoss Marshalling 是一个java序列化包,对JDK默认的序列化框架进行了优化,但又保持跟java.io.Serializable接口的兼容,同时增加了一些可调参数和附加特性,这些参数 ...

  6. bzoj 1962: 模型王子

    呵呵呵呵http://wenku.baidu.com/link?url=o0CPVzuBDLJMt0_7Qph1T7TtdFOzu7O-apIpvaWbIYMz8ZWqBneGqI8LGtLdqpuK ...

  7. office组件导入导出常见异常记录

    异常:未能加载文件或程序集"Microsoft.Office.Interop.Excel, Version=11.0.0.0, Culture=neutral, PublicKeyToken ...

  8. 【剑指Offer】面试题13. 机器人的运动范围

    题目 地上有一个m行n列的方格,从坐标 [0,0] 到坐标 [m-1,n-1] .一个机器人从坐标 [0, 0] 的格子开始移动,它每次可以向左.右.上.下移动一格(不能移动到方格外),也不能进入行坐 ...

  9. 使用BurpSuite和Hydra爆破相关的服务（9.25 第十一天）

    使用BP和Hydra爆破相关的服务 Hydra:九头蛇,开源的功能强大的爆破工具,支持的服务有很多,使用Hydra爆破C/S架构的服务. 使用BurpSuite爆破web服务 DVWA:web应用程序 ...

  10. HDU - 5898 odd-even number （数位dp）

    题意:求一个区间内,满足连续的奇数长度是偶数,连续的偶数长度是奇数的数的个数. #include<cstdio> #include<cstring> #include<c ...