vue基礎---10生命週期
阿新 • • 發佈：2021-09-13
00.生命週期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h1>{{message}}</h1> <h1 :class="className">hello</h1> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ message:"hello vue", className:"active" }, beforeCreate(){//創造前 // 資料data和方法methods還未繫結到應用物件app上 console.log('beforCreate'); }, created(){//創造 // 資料data和方法methods繫結到應用物件app上 console.log('created'); }, beforeMount(){//渲染前 //根據資料生成的DOM物件是獲取不到的 console.log('beforeMount'); }, mounted(){//渲染 console.log('mountd'); }, methods:{ clickEvent:function(){ } }, beforeUpdate() { //資料更改,但內容未更改之前 console.log('beforeUpdate') }, updated() { //內容已更新完畢 console.log('update') }, beforeDestroy() { //應用銷燬之前 console.log("beforeDestory") }, destroyed(){ //應用銷燬之後 console.log("Destory") } }) </script> </body> </html>