vue的生命周期

最新推荐文章于 2024-06-19 11:11:55 发布

清欢灬

最新推荐文章于 2024-06-19 11:11:55 发布

阅读量472

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/a754334599/article/details/116172229

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <!-- 
        vue 的生命周期钩子函数：
            创建前/后 ： beforeCreate()   created()
            挂载前/后 :  beforeMount()    mounted()
            更新前/后 :  beforeUpdate()   updated()
            销毁前/后 :  beforeDestroy()   destroyed()

        vue 的生命周期 组件都可以使用 


        父子组件的生命周期钩子函数执行顺序？
        
        beforeDestroy()   destroyed()  触发：
        1.  需要手动触发vm.$destroy() 方法触发；
        2.   v-if 触发 切换组件的时候会触发 
        3.  路由切换 


     -->
    <!--  独立的模板文件 ： 不建议使用   -->
    <!-- <script id="order" type='text/x-template'>
         <p>这是vue 模板 !!!!!!!!!!!!! {{msg}} </p>
     </script> -->

    <script>
        //  
        const app = new Vue({
            el: '#app',
            //  值是模板名
            // template:'#order',
            data: {
                msg: 'hello vue'
            },

            beforeCreate() {
                console.log('创建前 。。。 ');
                console.log(this.$el);
                console.log(this.msg);
            },
            created() {
                console.log('创建后 。。。 。。。');
                console.log(this.$el); // 挂载点还没有初始化
                console.log(this.msg); // 但是可以正常开始访问data中数据                
            },
            beforeMount() {
                console.log('挂载前。。。');
                console.log(this.$el);
            },
            mounted() {
                console.log('挂在后。。。。。。。。。。');

            },
            //  牵扯到数据更新改变才会触发
            beforeUpdate() {
                console.log('数据更新前');

            },
            updated() {
                console.log('数据更新后。。。');

            },
            //  组件被销毁时触发
            beforeDestroy() {
                console.log('销毁前');

            },
            destroyed() {
                console.log('销毁后');

            }
        })
    </script>
</body>

</html>

清欢灬

关注

0
点赞
踩
1

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id.
复制链接

扫一扫