<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <body> <div id="my"> {{msg}} <button @click="update">更新数据</button> <button @click="destroy">销毁组件</button> </div> </body> <script> // Vue.filter('addZero',function (data) { // return data<10?'0'+data:data; // }) var vm = new Vue({ el:"#my", data:{ msg:'hallo world', flag:true, lists:[{name:'a1',type:'1'},{name:'a2',type:'2'},{name:'a3',type:'3'}], currentTime:Date.now() }, methods:{ update(){ this.msg ="欢迎"; }, destroy(){ this.$destroy(); } }, beforeCreate(){ this.msg ="112233"; alert('组件实例刚刚创建,还未进行数据观察和事件配置'); // 创建前状态 el和data并未初始化 }, created(){ //常用 创建完毕状态 完成data数据初始化 el没有 alert('实例已经创建完成,并且已经进行数据观察和事件配置') }, beforeMount(){ //挂载状态 完成了el 和 data 的初始化 alert('模板编译之前,还未挂载') }, mounted(){ //常用 挂载结束状态 完成挂载 alert('模板编译后,已经挂载,此时才会有渲染页面,才能看到页面上数据显示') }, //组件进行操作 beforeUpdate(){ //更新前状态 alert('组件更新前') }, updated(){ //更新完成状态 alert('组件更新完成之后') }, beforeDestroy(){ //销毁前状态 alert('组件销毁之前') }, destroyed(){ //销毁完成状态 alert('组件销毁之后') } }) </script> </html>
vue 生命周期详解
最新推荐文章于 2022-04-11 14:48:31 发布