<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);