- beforeCreate 创建之前
- created 创建之后
- befreMount 渲染之前
- mounted 渲染之后
- beforeUpdate 更新前
- updated 更新
- beforeDestroy 销毁之前
- destroyed 销毁
- 对象.$destory() 销毁对象
<body>
<div id="app">
<h1 id="box" @click="change()">{{msg}}</h1>
</div>
<script src="../第一天/js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'hello'
},
methods:{
change(){
this.msg+=1;
}
},
// 生命周期说明的就是组件从创建到销毁的过程
// 创建之前
beforeCreate:function(){
console.log('beforeCreate..............');
console.log(this.msg);
console.log(box.innerHTML)
},
// 创建完毕
created:function(){
console.log('created..............');
console.log(this.msg);
console.log(box.innerHTML)
},
// 挂载之前
beforeMount:function(){
console.log('beforeMount..............');
console.log(this.msg);
console.log(box.innerHTML)
},
// 挂载完毕
mounted:function(){
// 一般此时进行ajax请求
console.log('mounted..............');
console.log(this.msg);
console.log(box.innerHTML)
},
// 数据更新之前
beforeUpdate:function(){
console.log('beforeUpdate.........');
console.log(this.msg);
console.log(box.innerHTML)
},
// 数据更新了
updated:function(){
console.log('updated.........');
console.log(this.msg);
console.log(box.innerHTML)
},
beforeDestroy:function(){
console.log('销毁之前.........');
},
destroyed:function(){
console.log('销毁了.........');
}
})
// 选择对象.$destroy() 销毁对象