文档章节

vue的生命周期

1527
 1527
发布于 2017/06/29 23:00
字数 347
阅读 24
收藏 0
<div id="app">
	     <p>{{ message }}</p>
	</div>
	<script>
		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>

 

本文转载自:https://segmentfault.com/a/1190000008010666

1527

1527

粉丝 9
博文 113
码字总数 45785
作品 0
成都
程序员
私信 提问
05、手把手教Vue--生命周期

PS:转载请注明出处 作者: TigerChain 地址: https://www.jianshu.com/p/0d50ea1cef93 本文出自 TigerChain 简书 手把手教 Vue 系列 本节大纲 教程简介 1、阅读对象 本篇教程适合新手阅读,老...

TigerChain
2018/09/12
0
0
vue系列--vue.js框架原理浅析

vue.js是一个非常优秀的前端开发框架,不是我说的,大家都知道。 首先我现在的能力,独立阅读源码还是有很大压力的,所幸vue写的很规范,通过方法名基本可以略知一二,里面的原理不懂的地方多...

saucxs
05/23
0
0
了解vue.js的生命周期函数

了解vue的生命周期函数和运行中事件,有助于我们更好地使用vue 具体代码文件 四个生命周期函数 beforeCreate 第一个生命周期函数,表示实例已经创建,但 data 和 methods 还没有被初始化 cr...

章鱼喵_
2018/07/04
0
0
2018 我所了解的 Vue 知识大全

年初第一个 flag 就是掌握 vue ,哈哈! Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很...

cacao111
2018/07/11
0
0
Vue从甜小白到皮大佬系列(三) 生命周期

什么是生命周期? 生命周期是指一个事物从生到死的过程,软件也一样,每个语言都有其生命周期,从出生到死亡,每个阶段做每个阶段应该做的事情,简单说:一个组件从开始到最后消亡所经历的各种状态...

极客James
08/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

[转] Java 无界阻塞队列 DelayQueue 入门实战

原文出处:http://cmsblogs.com/ 『chenssy』 DelayQueue是一个支持延时获取元素的无界阻塞队列。里面的元素全部都是“可延期”的元素,列头的元素是最先“到期”的元素,如果队列里面没有元...

泥瓦匠BYSocket
8分钟前
1
0
zk中集群版中角色和消息类型

服务器角色 LEADER LEARNER FOLLOWING OBSERVER 消息类型 数据同步 服务器初始化 请求处理型 会话管理型 LEADER 集群工作核心,作用有: 1事务请求唯一调度和处理者,保证事务处理顺序性 2集...

writeademo
10分钟前
2
0
阿里云推送的基本使用-Swift;iOS10+

func initCloudPush(){ CloudPushSDK.asyncInit("*****", appSecret: "*******") { (result) in if result!.success{ print("deviceId===......

west_zll
21分钟前
2
0
分布式及高可用元数据采集原理

转载本文需注明出处:微信公众号EAWorld,违者必究。 引言: 元数据采集是元数据产品的核心部分,如何提升采集效率是需要仔细斟酌的事情,既要保持稳定性也要保持跟上主流技术的发展趋势。元...

EAWorld
37分钟前
2
0
为构建社交关系链手淘都做了啥?

作者|王卫(泓冰) 出品|阿里巴巴新零售淘系技术部 01、淘宝社交关系推荐的背景 1、互联网下半场到来:互联网的下半场,人口红利消失,各大平台需要对用户做精细化运营,用户的增长和留存是每一...

阿里云官方博客
38分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部