我的Vue.js的学习之旅记录(2)

最新推荐文章于 2024-07-19 18:41:59 发布

超胖猫儿

最新推荐文章于 2024-07-19 18:41:59 发布

阅读量146

点赞数

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

本文链接：https://blog.csdn.net/qq_39317423/article/details/81783675

版权

vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习准备：通读一遍vue官网的[介绍]章节
网站：vue官网

Vue实例生命周期函数
以下为代码的辅助理解

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue实例生命周期函数</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script>
        //生命周期函数就是Vue实例在某一个时间点会自动执行的函数
        //生命钩子，渲染渲染！！！
            var vm = new Vue({
                el: '#app',         //没有template的时候将这个用作模板
                template:"<div>{{test}}</div>",
                data:{
                        test:'hello world'
                    },

                    beforeCreate: function(){
                        console.log("beforeCreate");
                    },
                    created: function(){
                        console.log("created");
                    },
                    beforeMount: function(){     //数据和模板相结合即将挂在到页面的一瞬间进行
                        console.log(this.$el);   //测试一下这个函数
                        console.log("beforeMount");
                    },
                    mounted:function(){
                        console.log(this.$el);
                        console.log("mouted");
                    },
                    beforeDestroy:function(){   //在console中用$destroy()进行测试查看
                        console.log("beforeDestroy");
                    },
                    destroyed:function(){
                        console.log("destroy");
                    },
                    beforeUpdate:function(){    //console中使用vm.test = "de" 进行数据的更新进行测试查看
                        console.log("beforeUpdate");
                    },
                    updated:function(){
                        console.log("updated");
                    }

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