Vue生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
 
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        },
        data:{
           
        },
        methods: {
            
        }
    })
</script>
</html>

实现效果:

上一篇Vue指令具体实现

本文作者：万事胜意k

本文链接：https://www.cnblogs.com/ysk0904/p/17270767.html

posted @ 2023-03-29 22:52 万事胜意k 阅读(22) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

ysk0904

Vue生命周期

公告

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vue-指令-v-for</title>
	<script src="js/vue.js"></script>
	</head>
	<body>
	<div id="app">

	</div>
	</body>
	<script>
	//定义Vue对象
	new Vue({
	el: "#app", //vue接管区域
	mounted () {
	alert("vue挂载完成,发送请求到服务端")
	},
	data:{

	},
	methods: {

	}
	})
	</script>
	</html>