码迷,mamicode.com
首页 > 其他好文 > 详细

vue 对象的生命周期

时间:2019-12-13 21:37:40      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:div   方法   htm   代码   console   自动   ajax   创建   pre   

<div id="app">
    <p>{{num}}</p>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            num: 10,
        },
        beforeCreate(){
            // vm对象创建执行的方法
            console.log("vm对象创建之前");
            console.log( this.$el);
            console.log( this.$num);
        },
        created(){
            // vm 对象创建以后执行的方法
            console.log("vm对象创建之后");
            console.log( this.$el);  //此时vm 对象还没用初始化完成,所以没有把data挂在标签指令中
            console.log( this.$num);
        },
        beforeMount(){
            // vm 对象创建以后,挂载数据之前
             console.log("vm对象创建以后,执行指令之前");
             console.log( this.$el);
        },
        mounted(){
            //  vm 对象挂载数据之后
            console.log("vm对象创建之前");
            console.log( this.$el);
        }
        // 上面四个都是在创建vm 的时候进行初始化过程中自动调用的
        // 工作中,会在created或者mounted里面编写ajax 代码去服务器端获取数据
        // 如果这些数据不能涉及到修改HTML代码的,则Ajax写在created里面
        // 理论上来说,ajax代码提取数据肯定是越早越好
    })

</script>

  

vue 对象的生命周期

标签:div   方法   htm   代码   console   自动   ajax   创建   pre   

原文地址:https://www.cnblogs.com/eliwen/p/12037274.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!