Vue 概览

构造器

每个 Vue 程序的开始都是由构造函数 Vue 创建实例：

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

选项包含数据、模板、挂载元素、方法、生命周期钩子等，在 API 文档查看。

可以使用 extend 拓展构造函数 Vue：

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

所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

属性与方法

每个 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

// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

API 文档查看全部属性与方法。

实例生命周期

生命周期方法内的 this 指向 Vue 实例自身。

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

生命周期图示，进一步学习时可以深入理解。

Vue 概览

构造器

属性与方法

实例生命周期

推荐阅读更多精彩内容