概述

Vue 构造函数

Vue 的构造函数是 Vue.js 的核心。它允许你创建 Vue 实例。创建一个 Vue 实例非常简单:

1
var vm = new Vue({ /* options */ })

当你初始化一个 Vue 实例时,你需要传递一个选项对象。这个对象可以包括目标 DOM 元素,初始 data 对象,mixin 方法,生命周期钩子函数等内容。完整的选项列表详见 组件选项

每个 Vue 实例本质上就是一个 ViewModel (因此在本文档中你会看到好多变量名叫 vm)。每个实例都有一个对应的 DOM 节点 vm.$el,它大致相当于 MVVM 中的 V。每个实例也有一个 JavaScript 数据对象 vm.$data,相对应的就是 MVVM 中的 M。改变 M 会触发 V 的更新。对于双向绑定,用户在 V 当中触发的事件会导致 M 的状态变化。Vue 实例上暴露的全部属性详见 实例属性

每个 Vue 实例也有不少 实例方法,包括数据监视,事件通讯和 DOM 操作等等。

Vue 构造函数本身也暴露了 全局 API,这些 API 可以让你扩展 Vue 的子类,配置全局选项,注册全局组件、指令、过滤器这些自定义资源等等。

实例初始化

如果你在实例化中提供了 el 选项,Vue 实例将会立即进入编译阶段。否则,编译工作直到其 vm.$mount() 被调用时才会开始。在编译阶段,Vue 会递归遍历模板中的 DOM 节点并收集其中的指令,将其数据和这些指令所对应的 DOM 节点 “链接” 起来。一旦链接完毕,这些 DOM 节点就算是被 Vue 实例正式接管了。一个 DOM 节点只能被一个 Vue 实例管理,并且不能被多次编译。

数据代理

每一个 Vue 实例都会对其 $data 对象上的所有属性进行代理。假如你的数据对象上有个属性叫 msg,你可以通过 vm.$data.msg 来访问这个属性,也可以通过 vm.msg 来访问它。看起来有点神奇,但这完全是可选的,你可以选择只使用 vm.$data.msg 这种方式来访问。但是,不论你的偏好如何,都需要注意 vmvm.$data 之间的区别,因为前者是一个 Vue 实例,和纯粹的数据对象还是有区别的。

还有一点值得注意的是数据对象 (data objects) 并不一定只能被一个 Vue 实例观察。我们完全可以让多个 vm 实例可以观察同一个数据对象。当多个组件需要共享一些全局状态的时候,这个特性就非常有用。

This is the documentation for an older version of Vue.
If you’re looking for the current documentation click here.