<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue生命周期</title>
</head>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
window.onload = function(){
//配置是否允许检查代码,方便调试，生产环境中设置为false
Vue.config.devtools = true; //检查代码
Vue.config.productioinTip = false; //有强迫症的，可以关掉生产中的提示信息
let vm = new Vue({
el: "#div1",
data:{
msg:'hello world'
},
methods:{
update(){
this.msg = '更新数据hello world';
},
destroy(){
vm.$destroy(); //销毁本实例
}
},
beforeCreate(){
alert('组件实例刚创建，还没进行数据观测和事件配置');
},
created(){
//经常用
alert('实例已经创建完成，并且已经进行数据观测和事件配置');
},
beforeMount(){
alert('模板编译之前，还没挂载');
},
mounted(){
//常用
alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的显示');
},
beforeUpdate(){
alert('组件更新之前');
},
updated(){
alert('组件更新之后');
},
beforeDestroy(){
alert('组件销毁之前');
},
destroyed(){
alert('组件销毁之后');
}
});
}
</script>
<body>
<div id="div1">
`msg`
<button @click="update">更新数据</button>
<button @click="destroy">销毁组件</button>
</div>
</body>
</html>Vue生命周期
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.