每个Vue应用都是通过用Vue函数创建的新的Vue实例开始的

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

在文档中经常使用vm（ViewModel）表示Vue实例

一个Vue应用是由一个通过new Vue创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成。

一个todo应用的组件树可以是

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

数据与方法

当一个Vue实例创建时，它向Vue的响应式系统中加入其data对象中能找到的所有属性。当这些属性值发生改变时，视图将会产生响应。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

注意，只有当实例创建时data中存在的属性才是响应式的，而新添加的属性并不是

因此，如果有些属性开始为空或不存在，可以设置一些初始值

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

如果使用Object.freeze()将会阻止修改现有的属性，意味着响应系统无法再追踪变化。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

实例属性与方法

除了数据属性，Vue实例还暴露一些有用的实例属性与方法，它们以$作为前缀，用来与用户定义的属性区分

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 (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})