<!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生命週期
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.