实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用：


  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title></title>
  6.     <meta charset="utf-8">
  7.     <script src="http://unpkg.com/vue/dist/vue.js"></script>
  8.     <script type="text/javascript">
  9.         window.onload = function(){
  10.             new Vue({
  11.                 el:'#box',
  12.                 data:{
  13.                     msg:'welcome'
  14.                 },
  15.                 created:function(){
  16.                     console.log('实例已经创建,msg变量还未渲染到模板')
  17.                 },
  18.                 mounted:function(){
  19.                     console.log('已经挂载到模板上:msg变量渲染到模板')
  20.                 },
  21.                 updated:function(){
  22.                     console.log('实例更新啦')
  23.                 },
  24.                 destroyed:function(){
  25.                     console.log('销毁啦')
  26.                 }
  27.             });
  28.         }
  29.     </script>
  30. </head>
  31. <body>
  32.     <div id="box">
  33.         <input type="text" v-model="msg"><br/>
  34.         {{msg}}
  35.     </div>
  36. </body>
  37. </html>

官方示意图

Vue2学习笔记:实例生命周期的更多相关文章

  1. VUE 学习笔记 二 生命周期

    1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...

  2. Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅

    Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...

  3. Java Web学习笔记-Servle生命周期

    Servlet会在服务器启动或第一次请求该Servlet的时候开始生命周期,在服务器停止的时候结束生命周期. 无论请求多少次Servlet,最多只有一个Servlet实例.多个客户端并发请求Servl ...

  4. android学习笔记 activity生命周期&任务栈&activity启动模式

    activity生命周期 完整生命周期 oncreate->onstart->onresume->onpause->onstop->ondestory 使用场景:应用程序 ...

  5. iOS学习笔记—ViewController/生命周期

    ViewController是iOS应用程序中重要的部分,是应用程序数据和视图之间的重要桥梁,ViewController管理应用中的众多视图.iOS的SDK中提供很多原生ViewController ...

  6. MVC学习笔记---MVC生命周期

    Asp.net应用程序管道处理用户请求时特别强调"时机",对Asp.net生命周期的了解多少直接影响我们写页面和控件的效率.因此在2007年和2008年我在这个话题上各写了一篇文章 ...

  7. MVC学习笔记---MVC生命周期及管道

    ASP.NET和ASP.NET MVC的HttpApplication请求处理管道有共同的部分和不同之处,本系列将体验ASP.NET MVC请求处理管道生命周期的19个关键环节. ①以IIS6.0为例 ...

  8. Android学习笔记_18_Activity生命周期 及 跳转方式

    一.Activity有三个状态: 1.当它在屏幕前台时(位于当前任务堆栈的顶部),它是激活或运行状态.它就是响应用户操作的Activity. 2. 当它上面有另外一个Activity,使它失去了焦点但 ...

  9. AngularJs学习笔记-组件生命周期

    组件生命周期 (1)组件生命周期钩子 constructor:组件创建时被创建 ngOnChanges: 父组件修改或初始化子组件的输入属性时被调用,如果子组件没有输入属性,则永远不会被调用,它的首次 ...

随机推荐

  1. 关于Item

    0.Item The base class of all items, which implements default behavior. 项(Item)代表一个字节码中可以寻址的实体,有许多种类的 ...

  2. NodeJS require a global module/package in linux

    https://stackoverflow.com/questions/15636367/nodejs-require-a-global-module-package 1  export NODE_P ...

  3. 共识算法：PBFT、RAFT

    转自:https://www.cnblogs.com/davidwang456/articles/9001331.html 区块链技术中,共识算法是其中核心的一个组成部分.首先我们来思考一个问题:什么 ...

  4. C#的TextBox获取行高

    当TextBox使用多行之后,如果想获取每行的高度,似乎有点问题, TextBox.Height获取的是控件的高度, 而我们常做的是根据行的数量来决定是否要显示滚动条 如下: //不能直接获取每行的高 ...

  5. .Net Core使用NLog记录日志

    参见:https://github.com/NLog/NLog.Web/wiki/Getting-started-with-ASP.NET-Core-2 大致步骤: Nuget中引用NLog及NLog ...

  6. Wordpress性能优化：使用crontab+wp-cli代替wp-cron

    wp-cron的问题     Wordpress内置wp-cron的模块,可以用来执行定时任务,比如定时检查更新,定时发布文章等都需要用到,属于必备功能.但是该模块的特点是:它只能在用户发起请求时检查 ...

  7. C#比较两个字符串的相似度【转】

    原文地址:http://www.2cto.com/kf/201202/121170.html 我们在做数据系统的时候,经常会用到模糊搜索,但是,数据库提供的模糊搜索并不具备按照相关度进行排序的功能. ...

  8. nginx 错误日志分析

    502 1.查看nginx错误日志 tailf /data/log/nginx/error.log // :: [error] #: * recv() failed (: Connection res ...

  9. spring-boot集成PageHelper和通用Mapper

    前提条件:已经集成mybatis 代码生成步骤: 添加依赖 <dependency> <groupId>tk.mybatis</groupId> <artif ...

  10. Java反射拾遗

    定义:Java反射机制可以让我们在编译期(Compile Time)之外的运行期(Runtime)检查类,接口,变量以及方法的信息.反射还可以让我们在运行期实例化对象,调用方法,通过调用get/set ...