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