Vue 初体验 • Mars Blog

Vue 是 [Evan You][evan] 去年还在 Google 的时候开发的一个构建数据驱动的 web 界面的库。Vue 通过尽可能简单的 API 实现响应的数据绑定（MVVM）和组合的视图组件。

Vue 自身不是一个全能框架——它只聚焦于视图层（和 React 有异曲同工之妙）。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起用时，Vue 也能完美地驱动复杂的单页应用。

下面来体验一下 Vue 的两大核心：

响应的数据绑定

Vue 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复且易错的。Vue 拥抱数据驱动视图的概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 操作搅在一起。这让我们的代码更容易撰写、理解与维护。你的数据越多，越需要操作 DOM 的时候越能体现出 Vue 的优势。

Data Binding

看起来这跟单单渲染一个模板非常类似，但是 Vue 在背后做了大量工作。并且 DOM 会自动响应数据的变化。注意我们不需要撰写任何 DOM 操作代码：被绑定增强的 HTML 模板是底层数据状态的声明式的映射，数据不过是普通 JavaScript 对象。Vue 的视图完全由数据驱动。

和模板函数一样，Vue 也可以通过一种行为来操作数据——指令。我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据。而且，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/删除元素时自动应用过渡效果。你只需要给你的元素增加 v-x 属性就可以实现很多过渡效果。

组件系统

组件系统是 Vue 的另一个核心。它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：

Component Tree

实际上，一个典型的用 Vue 构建的大型应用将形成一个组件树。来看看使用了组件的应用模板是什么样的：

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

你可能已经注意到 Vue 组件非常类似于自定义元素—— Web Component 规范的一部分。实际上 Vue 的组件语法参考了该规范。例如 Vue 组件实现了 Slot API 和 is 特性。但是，有 2 个关键点不一样：

Web Component 规范仍然未完成，并且没有浏览器实现。相比之下，Vue 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。必要时，Vue 组件也可以放在原生自定义元素之内
Vue 组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换

组件系统是用 Vue 构建大型应用的基础。另外，Vue 生态系统也提供了高级工具与多种支持库，它们和 Vue 一起构成了一个更加“框架”性的系统。