初学vue,写一些随便谨防忘记,不足之处谢谢指出!!!
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>生命周期</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <button @click="dom()">点击</button> <hr/> <button @click="del()">销毁</button> {{msg}} </div> </body> <script> new vue({ el: "#app", data: { msg: "我爱学vue!!!" }, /*创建之前,$el(并未接管#app) $data均为undefined*/ beforecreate() { console.log("---------------beforecreate----------------") console.log("el:" + this.$el) console.log(this.$el) console.log("data:" + this.$data) console.log(this.$data) console.log(this) }, /*创建,$el为undefined(并未接管#app) $data已获取数据*/ created() { console.log("---------------created----------------") console.log("el:" + this.$el) console.log(this.$el) console.log("data:" + this.$data) console.log(this.$data) }, /*挂载之前,$el已接管#app $data获取数据 但是并未将数据渲染*/ beforemount() { console.log("---------------beforemount----------------") console.log("el:" + this.$el.innerhtml) console.log(this.$el) console.log("data:" + this.$data) console.log(this.$data) }, /*挂载之前,$el已接管#app $data获取数据 并将数据渲染 页面成型*/ mounted() { console.log("---------------mounted----------------") console.log("el:" + this.$el.innerhtml) console.log(this.$el) console.log("data:" + this.$data) }, beforeupdate() { console.log("---------------beforeupdate----------------") console.log("el:" + this.$el.innerhtml) console.log(this.$el) console.log("data:" + this.$data) console.log(this.msg) }, updated() { console.log("---------------updated----------------") console.log("el:" + this.$el.innerhtml) console.log(this.$el) console.log("data:" + this.$data) console.log(this.msg) }, beforedestroy() { console.log("---------------beforedestroy----------------") console.log("el:" + this.$el.innerhtml) console.log(this.$el) console.log("data:" + this.$data) console.log(this.msg) }, destroyed() { console.log("---------------destroyed----------------") console.log("el:" + this.$el.innerhtml) console.log(this.$el) console.log("data:" + this.$data) console.log(this.msg) }, methods: { dom() { this.msg = "我爱vue-初学!!!" console.log(this) }, del() { this.$destroy(); } } }); </script> </html>
如对本文有疑问, 点击进行留言回复!!
微信小程序wx.scanCode扫描条形码,偶尔出现条形码不正确导致查询失败
Android 入门第七讲01-数据存储(数据存储概述,文件存储(raw和asserts目录读写,data/data/包名目录读写,sdcard目录读写),SharedPreferences读写)
vue-axios系列:axios拦截器,配置请求头,配置请求参数
网友评论