zoukankan      html  css  js  c++  java
  • vue.js 生命周期

    • boforeCreate   创建之前

    • created            创建之后

    • boforeMount    实例化之前

    • mounted          实例化之后

    话不多说,直接上代码

    <div id="test">
    {{a}}
    </div>

    var myVue = new Vue({
    el: "#test",
    data: {
    a: "HelloWord"
    },
    beforeCreate: function() {
    console.log("创建前")
    console.log(this.a)
    console.log(this.$el)
    },
    created: function() {
    console.log("创建之后");
    console.log(this.a)
    console.log(this.$el)
    },
    beforeMount: function() {
    console.log("mount之前")
    console.log(this.a)
    console.log(this.$el)
    },
    mounted: function() {
    console.log("mount之后")
    console.log(this.a)
    console.log(this.$el)
    },
    beforeUpdate: function() {
    console.log("更新前");
    console.log(this.a)
    },
    updated: function() {
    console.log("更新完成");
    console.log(this.a)
    },
    beforeDestroy: function() {
    console.log("销毁前");
    console.log(this.a)
    console.log(this.$el)
    },
    destroyed: function() { 
    console.log("已销毁");
    console.log(this.a)
    console.log(this.$el)
    }
    });

     测试中,发现

    beforeCreate创建之前 data是undefined、el也是undefined

    created创建之后 data是a的值:HelloWord、el是undefined

    beforeMount实例化之前 data是a的值:HelloWord、el是虚拟的(即<div id="test">{{a}}</div> )

    mounted实例化之后 data是a的值:HelloWord、el是真实的(即 <div id="test">HelloWord</div>)

    本人 初学vue,可能文章有些词语说得不正确,望园友请指出

    文章有问题随时联系我转载请注明出处

  • 相关阅读:
    MVC4学习-View(0)
    javascript与常用正则表达式
    uhfreader&rfid标签测试
    WebClient文件上传很方便哈
    NAudio的简单用法
    与wmi交互,调非托管代码,单元测试遇到的一些问题
    我在这里骑美团单车被交警罚了50元,这个地方不能骑共享单车大家留意了
    发邮件,美化table格式
    学习jwt的简单使用
    学习redis的基本使用
  • 原文地址:https://www.cnblogs.com/goatling/p/6296624.html
Copyright © 2011-2022 走看看