vue生命周期

最新推荐文章于 2022-10-31 10:18:26 发布

风雨等归期

最新推荐文章于 2022-10-31 10:18:26 发布

阅读量224

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/liangmaxmin/article/details/105092503

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue实例生命周期函数</title>
        <script src="../js/vue.js"></script>
	</head>
	<body>
        <div id="app">
            
        </div>
	</body>
    <script>
        // 生命周期函数就是VUE在某一个时间点会自动执行的函数
        var vm = new Vue({
            el:'#app',
            template:'<div>{{test}}</div>',
            data:{
              test : 'Hello world'  
            },
            beforeCreate() {
            	console.log('beforecreate');
            },
            created() {
            	console.log('created');
            },
            beforeMount() {
                //当页面渲染之前执行
                console.log(this.$el);
            	console.log('beforeMont');
            },
            mounted() {
                //当页面渲染完后执行
                console.log(this.$el);
            	console.log('mouted');
            },
            beforeDestroy() {
                //当vm被销毁的时候执行
            	console.log('beforeDestroy');
            },
            destroyed() {
            	console.log('destory');
            },
            beforeUpdate() {
                //当data里面的值改变的时候就执行
            	console.log('beforeUpdate');
            },
            updated() {
            	console.log('update');
            },
            activated() {
                //只有当父组件使用keep-alive的时候才会生效
                window.addEventListener('scroll',this.handleScroll)
            },
            deactivated() {  
              //当前页面切换的时候才会生效 
               window.removeEventListener('scroll',this.handleScroll)
            }
        })
    </script>
</html>

在这里插入图片描述

风雨等归期

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
vue生命周期

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue实例生命周期函数</title> <script src="../js/vue.js"></script> </head> <bo...
复制链接

扫一扫

专栏目录