您的位置：首页 > Web前端 > Vue.js

Vue.js基础_生命周期

2019-08-06 22:28 1116 查看

生命周期函数

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>

</head>
<body>
<div id="demo">
<button @click="destoryVm">touch</button>
<p v-show="isShow">i love you!</p>
</div>
</body>
<script type="text/javascript">
var demo=new Vue({
el:'#demo',
data:{
isShow:true,
},
beforeCreate(){
console.log(' beforeCreate')
},
created(){
console.log('created()')
},

mounted(){//初始化显示之后立即调用
this.intervalId=setInterval(()=>{
console.log('-----')
this.isShow=!this.isShow
},100)
},

//更新阶段(1次或者n次)
beforeUpdate(){
console.log('beforeUpdate()')
},
update(){
console.log('update()')
},

//死亡阶段

beforeDestroy(){
//清除定时器
console.log('beforeDestroyed()')
clearInterval(this.intervalId)
},
destroyed(){
console.log('destroyed()')
},
methods:{
destoryVm(){
//干掉vm
this.$destroy()
}
}

})

</script>
</html>

Vue生命周期图示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航