本文實例講述了vue生命周期與鉤子函數。分享給大家供大家參考,具體如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>www.49028c.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.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
新聞熱點
疑難解答