【vue】实例(extend,$data,$el)

[Kelichao]

构造器

var vm = new Vue({
  // 选项
})

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

可以在 API 文档中查看。

创建可复用的组件构造器

var MyComponent = Vue.extend({
  // 扩展选项
})
// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

属性与方法

属性

var vm = new Vue({
  data: {
    a:1,
    b:2
}
});

方法

• 注意：实例方法前面都有$符号

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

完整的实例属性API参考

实例生命周期

生命周期钩子

var vm = new Vue({
  data: {
    a: 1
  },
  // 初始化完毕触发
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

在实例生命周期的不同阶段调用，如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。

生命周期图