当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. Day4 - L - Tram POJ - 1847

    Tram network in Zagreb consists of a number of intersections and rails connecting some of them. In e ...

  2. eshop2-linux 软件源配置 and 建议

    1. 阿里云源配置:http://mirrors.aliyun.com/ 2. 源配置 2.1 sudo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.r ...

  3. SQL创建表格——手写代码

    打开phpstudy,打开Navicat for MySQL,进入要创建表格的数据库,点击上方“查询”按钮,“创建查询”,即可输入代码进行创建. 例: create table class( clas ...

  4. Win 10 开启FTP与配置

    转载:https://blog.csdn.net/qq_34610293/article/details/79210539 可能出现的问题是:设置共享文件,无法被共享.极大的可能原因是电脑防火墙的问题 ...

  5. Good Bye 2019

    A.Card Game 题目大意:两个人都有共有n张卡牌,每张卡牌上都有一个数xi,没有两张牌上的数相同,且xi不小于1不大于n.每次两个人选出一张牌来,牌上数字大的人赢得此局,如果谁最后手上拥有所有 ...

  6. ArcoLinux安装完成后的的配置

    ArcoLinux安装完成后的的配置 这可能是全网第一篇Arcolinux的教程 1. 更改源 修改/etc/pacman.d/mirrorlist 在最头上增加清华源 Server = https: ...

  7. ROS大型工程学习（二） 怎么阅读大型工程

    基本思路是由点到面,由浅到深. 1.首先从launch文件入手. 文件中会看到比如: <node ns="> <rosparam command="load&qu ...

  8. 福州大学2020年春软工实践W班第二次作业

    作业描述 这个作业属于哪个课程 福州大学2020年春软工实践W班 这个作业要求在哪里 寒假作业(2/2) 这个作业的目标 开发一个疫情统计程序 作业正文 福州大学2020年春软工实践W班第二次作业 其 ...

  9. Laravel框架的学习

    用xampp环境 1.Composer的安装 http://www.phpcomposer.com/ 下载Composer的安装exe php.ini中extension_dir.browscap路径 ...

  10. 《学习R》笔记：科学计算器、检查变量和工作区、向量、矩阵和数组、列表和数据框

    一.第二章 科学计算器 要检查两个数字是否一样,要使用 all.equal() ,不要使用 == ,== 符号仅用于比较两个整型数是否存在相同 . > all.equal(sqrt(2)^2,2 ...