1. 程式人生 > >vue2.0生命週期

vue2.0生命週期


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<section id="app">
{{data}}
</section>
</body>
<script type="text/javascript">
var myVue = new Vue({
el:'#app',
data:{
data:'aaaa',
info:'nono'
},
beforeCreate:function(){
console.log('建立前=======')
console.log(this.data)
console.log(this.$el)
},
created:function(){
console.log('已建立==========')
console.log(this.info)
console.log(this.$el)
},
beforeMount:function(){
console.log('mount之前=============')
console.log(this.info)
console.log(this.$el)
},
mounted:function(){
console.log("mounted==========")
console.log(this.info)
console.log(this.$el)
},
beforeUpdate:function(){
console.log('更新前========')
},
updated:function(){
console.log('更新完成=============')
},
beforeDestory:function(){
console.log('銷燬前============')
console.log(this.info)
console.log(this.$el)
},
destoryed:function(){
console.log('已銷燬===========')
console.log(this.info)
console.log(this.$el)
}

});
</script>
</html>