vue笔记参考：http://www.jiajiajia.club/search?str=vue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click="kill">销毁vue对象</button>
<p v-show="isShow">显示</p>
</div>
<script>
var v=new Vue({
el:'#app',
data:{
isShow:true
},
/***
* 初始化阶段
* **/
beforeCreate(){
console.log("创建之前执行");
},
created(){
console.log("创建之后执行");
},
beforeMounted(){
console.log("beforeMounted");
},
mounted(){//mounted回调函数在 初始化页面显示之后立即调用
console.log("页面初始化显示之后执行");
this.interid=setInterval(() => {
console.log("---")
this.isShow=!this.isShow
},1000)
},
/***
* 更新阶段
* **/
beforeUpdate(){
console.log("beforeUpdate");
},
updated(){
console.log("updated");
},
/***
* 销毁阶段
* ***/
beforeDestroy(){//vm对象死亡之前调用此方法
console.log("销毁之前执行");
clearInterval(this.interid);
},
destroyed(){//死亡之后执行
console.log("destroyed");
},
methods:{
kill(){
//销毁vue对象
this.$destroy();
}
}
})
</script>
</body>
</html>