首页 > 代码库 > vue2.0学习笔记之生命周期
vue2.0学习笔记之生命周期
- beforeCreate 组件实例刚刚被创建,属性都没有
- created 实例已经创建完成，属性已经绑定
- beforeMount 模板编译之前
- mounted 模板编译之后，代替之前ready
- beforeUpdate 组件更新之前
- updated 组件更新完毕
- beforeDestroy 组件销毁前
- destroyed 组件销毁后
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="box"> <input type="button" value="更新数据" @click="update"> <input type="button" value="销毁组件" @click="destroy"> <br> {{msg}} </div></body></html>
<script src="http://www.mamicode.com/vue.js"></script><script> new Vue({ el:‘#box‘, data:{ msg:‘welcome vue2.0‘ }, methods:{ update(){ this.msg=‘大家好‘; }, destroy(){ this.$destroy(); } }, beforeCreate(){ console.log(‘组件实例刚刚被创建‘); }, created(){ console.log(‘实例已经创建完成‘); }, beforeMount(){ console.log(‘模板编译之前‘); }, mounted(){ console.log(‘模板编译完成‘); }, beforeUpdate(){ console.log(‘组件更新之前‘); }, updated(){ console.log(‘组件更新完毕‘); }, beforeDestroy(){ console.log(‘组件销毁之前‘); }, destroyed(){ console.log(‘组件销毁之后‘); } });</script>
vue2.0学习笔记之生命周期
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。