本文實例講述了vue生命周期與鉤子函數。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.gxlcms.com vue生命周期與鉤子函數</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('實例已經創建'); }, beforeCompile:function(){ alert('編譯之前'); }, compiled:function(){ alert('編譯之后'); }, ready:function(){ alert('插入到文檔中'); }, beforeDestroy:function(){ alert('銷毀之前'); }, destroyed:function(){ alert('銷毀之后'); } }); /*點擊頁面銷毀vue對象*/ document.onclick=function(){ vm.$destroy(); }; </script> </body> </html>
網上找來一張流程圖:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com