vue day2

<div id="app">
  {{msg}}
</div>

js:

var vm = new Vue({
  //指定element
  el:"#app",
  data:{
   msg:"hi vue" 
  },
  //在实例初始化之后,数据观测(data observer)和event/watcher事件配置之前被调用.
  beforeCreate:function(){
    console.log('当创建前开始执行,也就是预加载 beforeCreate');
  },
  //在实例创建完成后被立即调用.
  //在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event事件回调,然而,挂载阶段还没开始,$el属性目前不可见.
  created:function(){
    console.log('在实例创建完成后被立即调用');
  },
  //在挂载开始之前被调用:相关的渲染函数首次被调用
  beforeMount:function(){
    console.log('在挂载开始之前被调用,相关的渲染函数首次被调用 也就是 beforeAmount');
  },
  //el被新创建的vm.$el替换,挂载成功
  mounted:function(){
    console.log('el被新创建的vm.$el替换,挂载成功,也就是mounted')
  },
  //数据更新时(前)调用
  beforeUpdate:function(){
    console.log('数据更新时调用 也就是beforeUpdate');
  },
  //组件DOM已经更新,组件更新完毕
  updated:function(){
    console.log('组件DOM已经更新,组件已经更新完毕时执行 也就是updated');
    setTimeout(function(){
      vm.msg = "I guess you will drink some coffee~";
    },5000)
  }
});

setTimeout(function(){
  vm.msg = "I guess you will drink some milk~";
},3000);