Vue实例：vm = new Vue({})

vm = new Vue({}) 表示创建一个Vue的实例 就是相当于创建一个根组件

1.创建一个 Vue 实例

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

1. var vm = new Vue({
   
2.   // 选项
   
3.   //当创建一个 Vue 实例时，你可以传入一个选项对象。
   
4. })
   

复制代码

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

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

1. 根实例
   
2. └─ TodoList
   
3.    ├─ TodoItem
   
4.    │  ├─ TodoButtonDelete
   
5.    │  └─ TodoButtonEdit
   
6.    └─ TodoListFooter
   
7.       ├─ TodosButtonClear
   
8.       └─ TodoListStatistics
   

复制代码

现在，你只需要明白所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

2.数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

1. // 我们的数据对象
   
2. var data = { a: 1 }
   
3. 
   
4. // 该对象被加入到一个 Vue 实例中
   
5. var vm = new Vue({
   
6.   data: data
   
7. })
   
8. 
   
9. // 获得这个实例上的 property
   
10. // 返回源数据中对应的字段
    
11. vm.a == data.a // => true
    
12. 
    
13. // 设置 property 也会影响到原始数据
    
14. vm.a = 2
    
15. data.a // => 2
    
16. 
    
17. // ……反之亦然
    
18. data.a = 3
    
19. vm.a // => 3
    

复制代码

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property，比如：

1. vm.b = 'hi'
   

复制代码

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。