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>