Vue的生命周期函数

最新推荐文章于 2022-04-03 15:50:28 发布

Take^that

最新推荐文章于 2022-04-03 15:50:28 发布

阅读量80

点赞数

分类专栏：前端文章标签：生命周期函数

本文链接：https://blog.csdn.net/qq_37767455/article/details/102333517

版权

前端专栏收录该内容

85 篇文章 0 订阅

订阅专栏

参考Vue中文文档：
Vue中文文档

先看代码：

<body>

    <div id="app"></div>

    <script>
       
        //data:用于定义数据
        //el:限制了一个VUE实例处理DOM的范围

        //生命周期函数就是vue实例在某一个时间点会自动执行的函数
        var vm=new Vue({
           el:'#app', 
           template:"<div>{{test}}</div>",
           data:{
               test:"Today is the best gift!"
           },
           beforeCreate() {
               console.log("beforeCreate");
           },
           created() {
               console.log("created");
           },
           beforeMount() {
               console.log(this.$el);
               console.log("beforeMount");
           },
           mounted() {
               console.log(this.$el);
               console.log("mounted");
           },
           beforeDestroy() {
               console.log("beforeDestroy")
           },
           destroyed() {
               console.log("destroyed");
           },
           beforeUpdate() {
               console.log("beforeUpdate");
           },
           updated() {
               console.log("updated");
           },
        });

    </script>
</body>

在这里插入图片描述
执行修改操作后：

执行destroy后：

Take^that

关注

0
点赞
踩
0

收藏

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

参考Vue中文文档：Vue中文文档先看代码：<body> <div id="app"></div> <script> //data:用于定义数据 //el:限制了一个VUE实例处理DOM的范围 //生命周期函数就是vue实例在某一个时间点会自动执行的函数 ...
复制链接

扫一扫