Vue.js 的两个核心概念

2016/5/5 posted in  Vue.js comments

翻译自 Evan You 的回复

数据驱动视图

在 Vue.js 中 DOM 的状态只是数据状态的映射。通过创建 “ViewModel” 对象将这两者连接起来。当你改变数据时,DOM 自动更新。实际的 DOM 操作被封装在 “Directives(指令)” 中 - 指令是观察表达式的对象,并且会在表达式值改变时做出反应。

<span v-text="message"></span>

在这里 v-text 是一个指令:它的工作是在你数据中的 message 属性值发生改变时更新 span 中的文本。
这可能在你实际开始使用前难以理解,但是核心概念很简单(即使非常重要):当你想要更新你的视图时,不要以为必须使用 JQuery 手动更新 DOM;而是想想如何表达模板中视图和数据之间的关系。一旦你声明了视图与数据的关系,Vue 会帮你做剩余的事情。

组件

UI 可能变得很大很复杂,我们想将一个复杂的应用分解成很多小的,解藕的单元,以便更容易理解和维护。在 Vue.js 中,我们通过 components 来实现 - 组件本质上是行为被提前定义好的 ViewModels。将你的 UI 认为是一颗组件树。Vue.js 提供了一个 API 用于定义,组装和组件间的数据沟通。