00vue实例的生命周期钩子函数

最新推荐文章于 2022-12-05 15:06:09 发布

田江

最新推荐文章于 2022-12-05 15:06:09 发布

阅读量352

点赞数

分类专栏： vue 文章标签： vue 钩子函数生命周期

本文链接：https://blog.csdn.net/jiang7701037/article/details/79433874

版权

vue 专栏收录该内容

49 篇文章 25 订阅

订阅专栏

把以下代码进行运行，看过程，应该能够明白意思：

如果想看概念和解释，请 https://blog.csdn.net/jiang7701037/article/details/83118665

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>		
		<div id="app1">
			<!--文本,就是innerText-->
			这是纯文本：{{txtmsg}}<br/>
			<!--原始HTML，就是innerHTML-->
			<div v-html="htmltag"></div>
			<!--属性-->
			<input type="button" value="按钮" v-bind:disabled="isButtonDisabled" />
			<!--使用JavaScript表达式-->
			<p>我今年:{{age}}岁了，明年肯定就是:{{age+1}}岁了</p>
		</div>
	</body>
</html>
<script type="text/javascript" src="vue.min.js" ></script>
<script type="text/javascript">

let v1 = new Vue({
	el:"#app1",
	data:{
		txtmsg:"hello vue",
		htmltag:"<p style='background-color:red'>我是一个红色的段落</p>",
		isButtonDisabled:true,
		age:20
	},
	beforeCreate:function(){
		console.log("vue实例创建前");
	},
	created:function(){
		console.log("vue实例创建成功，即在内存中申请到了空间");
	},
	beforeMount:function(){
		alert("渲染前");
		console.log("渲染前");
	},
	mounted:function(){
		//注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
		alert("渲染后");
		console.log("渲染后");
	},
	beforeUpdate:function(){
		alert("数据更新前");
		console.log("数据更新前");
	},
	updated:function(){
		//注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated
		alert("数据更新后，并渲染到页面上");
		console.log("数据更新后，并渲染到页面上");
	},
	beforeDestroy:function(){
		console.log("vue实例销毁前调用，说声bye-bye吧");
	}
});

</script>