Vue生命周期详解
来源:互联网 发布:网络传销案 编辑:程序博客网 时间:2024/05/17 01:37
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script></head><body><div id="app"> <p>{{ message }}</p></div><script type="text/javascript"> var app = new Vue({ el: '#app', data: { message : "xuxiao is boy" }, beforeCreate: function () { console.group('beforeCreate 创建前状态===============》'); console.log("%c%s", "color:red" , "el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message) }, created: function () { console.group('created 创建完毕状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeMount: function () { console.group('beforeMount 挂载前状态===============》'); console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, mounted: function () { console.group('mounted 挂载结束状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, updated: function () { console.group('updated 更新完成状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, destroyed: function () { console.group('destroyed 销毁完成状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) } })</script></body></html>
阅读全文
0 0
- 【Vue】详解Vue生命周期
- vue生命周期详解
- Vue生命周期详解
- vue生命周期详解
- vue.js 生命周期代码详解
- Vue实例详解与生命周期
- Vue实例详解与生命周期
- Vue实例详解与生命周期
- vue.js生命周期钩子详解
- Vue组件和Route的生命周期详解
- Vue入门系列之Vue实例详解与生命周期
- Vue入门系列之Vue实例详解与生命周期
- 05-Vue入门系列之Vue实例详解与生命周期
- Vue入门系列之Vue实例详解与生命周期
- Vue入门系列之Vue实例详解与生命周期
- Vue生命周期
- vue生命周期
- Vue生命周期
- codeforces 577B B. Modulo Sum(背包+dp)
- 欢迎使用CSDN-markdown编辑器
- 开发动态网站所需的构件
- 顺时针打印矩阵
- 理解Spark的核心RDD
- Vue生命周期详解
- JSP中EL表达式详解
- 函数指针的两种调用方式
- 编译linux内核加入 GPIO support 方法
- 【Algorithm】 着色
- Java反射机制剖析
- Spring详解(四)------注解配置IOC、DI
- 硬件电路设计经验教训浅谈
- 2017.9.6模拟考试