vue生命周期與鉤子函數(shù)簡單示例
更新時間：2019年03月13日 08:43:45 作者：白楊-M
這篇文章主要介紹了vue生命周期與鉤子函數(shù),結合簡單實例形式分析了vue.js生命周期及鉤子函數(shù)相關流程與實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了vue生命周期與鉤子函數(shù)。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>m.fzitv.net vue生命周期與鉤子函數(shù)</title>
<style>
</style>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
<div id="box">
{{msg}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
msg:'well'
},
created:function(){
alert('實例已經(jīng)創(chuàng)建');
},
beforeCompile:function(){
alert('編譯之前');
},
compiled:function(){
alert('編譯之后');
},
ready:function(){
alert('插入到文檔中');
},
beforeDestroy:function(){
alert('銷毀之前');
},
destroyed:function(){
alert('銷毀之后');
}
});
/*點擊頁面銷毀vue對象*/
document.onclick=function(){
vm.$destroy();
};
</script>
</body>
</html>
網(wǎng)上找來一張流程圖：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
這篇文章主要介紹了Vue 遞歸多級菜單的實例代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
本文主要介紹了將three項目遷移至vue項目遇到的問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
解決vue項目運行提示W(wǎng)arnings while compiling.警告的問題
這篇文章主要介紹了解決vue項目運行提示W(wǎng)arnings while compiling.警告的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue中使用Scss實現(xiàn)配置、切換主題方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3優(yōu)雅的實現(xiàn)跨組件通信的常用方法總結
開發(fā)中經(jīng)常會遇到跨組件通信的場景,props?逐層傳遞的方法實在是太不優(yōu)雅了,所以今天總結下可以更加簡單的跨組件通信的一些方法,文中通過代碼實例講解的非常詳細,需要的朋友可以參考下2023-11-11
本文主要介紹了Vue實現(xiàn)Echarts圖表寬高自適應的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vue路由導航守衛(wèi)和請求攔截以及基于node的token認證的方法
這篇文章主要介紹了vue路由導航守衛(wèi)和請求攔截以及基于node的token認證的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了Vue如何實現(xiàn)監(jiān)聽組件原生事件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了vue如何點擊多個tab標簽打開關閉多個頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
文章主要介紹了在Vue項目中處理全局樣式和局部樣式的方法,包括使用scoped屬性和深度選擇器（/deep/）來覆蓋子組件的樣式,作者建議所有組件必須使用scoped,以避免樣式?jīng)_突,對于父組件覆蓋子組件的樣式,作者推薦給子組件指定自定義類名2025-01-01