vue生命周期

jialan75

已于 2023-04-25 09:00:13 修改

阅读量58

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-04-25 08:50:12 首次发布

本文链接：https://blog.csdn.net/jialan75/article/details/130356803

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

vue生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期</title>
</head>

<body>
<div id="app">
    <h1>{{msg}}</h1>
    <h3>计数器:{{counter}}</h3>
    <button @click="add">按钮</button>
    <button @click="destroy">销毁</button>
</div>


<script src="../../js/vue2.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: 'Vue生命周期',
            counter:1,

        },
        methods: {
            add(){
                this.counter++;
            },
            destroy(){
                //销毁
                this.$destroy()
            }
        },
        //1.初始阶段
        beforeCreate(){
            console.log("1.初始阶段","beforeCreate");
        },
        //2.创建后
        created(){
            console.log("2.创建后","created");
        },
        //3.挂载前
        beforeMount(){
            console.log("3.挂载前","beforeMount");
        },
        //4.挂载后
        mounted(){
            console.log("4.挂载后","mounted");
        },
        //5.更新前
        beforeUpdate(){
            console.log("5.更新前","beforeUpdate");
        },
        //6.更新后
        updated(){
            console.log("6.更新后","updated");
        },
        //7.销毁前
        beforeDestroy(){
            console.log("7.销毁前","beforeDestroy");
        },
        //8.销毁后
        destroyed(){
            console.log("8.销毁后","destroyed");
        }

    })
</script>
</body>
</html>