• vue实例


    一、构造器

    每个vue应用都是通过构造函数vue创建一个vue的根实例启动的

    var MyComponent=Vue.extend({
      //扩展选项
    })
    var myComponentInstance=new MyComponent()

    二、属性和方法

    每个vue实例都会代理其data对下里所有的属性:

    var data={a:1}
    var vm=new VUe({
      data:data
    })
    vm.a===data.a //true
    vm.a=2
    data.a //2
    data.a=3
    vm.a //3

    只有这些被代理的属性时相应的,不会触发视图的更新

    除了data属性,vue实例暴露的一些有用的实例属性和方法,这些属性和方法都有前缀$,以便于代理的data属性区分。例如:

    var data={a:1}
    var vm=new Vue({
      el:'#example',
      data:data
    })
    vm.$data===data //true
    vm.$el===document.getElementById("example")//true
    vm.$switch('a',function(newVal,oldVal){
      //这个回调在vm.a 改变后调用
    })

    三、实例生命周期

    每个vue实例在被创建之前都要经过一系列的初始化过程,着这个过程中,实例也会调用一些生命周期钩子,提供了执行自定义逻辑的机会。

    例如:created这个钩子在实例被创建之后被调用

    var vm=new Vue({
      data{
        a:1
      },
      created:function(){
        //this指向vm实例
        console.log('a is'+this.a)
      }
    })

      其他的钩子,在实例生命周期的不同阶段调用,如mounted、updated、destoryed

  • 相关阅读:
    水晶报表参数字段在代码中赋值
    存储过程编写经验和优化措施
    积分与排名
    大话处理器
    抽象数学
    开普勒:天空的立法者
    Scalable Face Image Retrieval with IdentityBased Quantization and Multireference Reranking
    配色辞典
    图像识别顶级赛事
    Information Geometry
  • 原文地址:https://www.cnblogs.com/yaxinwang/p/6446162.html
Copyright © 2020-2023  润新知