当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 - D - Watchcow POJ - 2230

    Bessie's been appointed the new watch-cow for the farm. Every night, it's her job to walk across the ...

  2. Vuex源码分析(转)

    当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护 ...

  3. C++Socket通信（客户端和服务器）

    win32控制台版 获取本机IP: cmd:       ipconfig/all 我写的是一个服务器和客户端点对点的信息传递(实现相互的可以适当更改代码): 服务器发送给客户端的是一个结构体数据 t ...

  4. QT事件处理–notify()

    转载至:https://www.deeplearn.me/349.html 一.说明 Qt 处理事件的方式之一:”继承 QApplication 并重新实现 notify()函数”.Qt 调用 QAp ...

  5. Spring课程 Spring入门篇 7-3 advice扩展

    课程链接: 1 解析 1.1 advice中aspect 切面传参 1.2 通知参数名称——argNames属性, 参数为 JoinPoint.ProceedingJoinPoint.JoinPoin ...

  6. 166-PHP 文本分割函数str_split（一）

    <?php $str='programming'; //定义一个字符串 $arr=str_split($str); //将字符串分割并传入数组 print_r($arr); //输出数组详细信息 ...

  7. 第一个flink application

    导入maven依赖 需要注意的是,如果使用scala写程序,导入的依赖跟java是不一样的 Maven Dependencies You can add the following dependenc ...

  8. LCT(1)

    LCT(Link-Cut Tree,动态树)是一个支持动态修改树的结构的数据结构,其基本操作有 \(\texttt{access}\) , \(\texttt{findroot}\) , \(\tex ...

  9. 16 协程和www

    1.一个应用程序一般对应一个进程,一个进程一般有一个主线程,还有若干个辅助线程,线程之间是平行运行的,在线程里面可以开启协程,让程序在特定的时间内运行.2协程和线程的区别是:协程避免了无意义的调度,由 ...

  10. IT日常技能：VMware网络配置

    1.0 基本概念 集线器:把一流量为M的端口分为N个端口,每个端口流量为M/N 交换机:把一流量为M的端口分为N个端口,每个端口流量仍为M 路由器:相当于两块网卡,一块连接外网并负责NAT, 另一块负 ...