概述

Vue.js（发音为 /vjuː/，类似于 view）是一个用于构建交互式 Web 界面的库。Vue.js 的目标是提供 响应式数据绑定 和 可组合的视图组件 的优势，并提供尽可能简单的 API。

Vue.js 本身不是一个完整的框架 - 它只关注视图层。因此，它非常容易上手，并且可以轻松地与其他库或现有项目集成。另一方面，当与适当的工具和支持库结合使用时，Vue.js 也完全能够为复杂的单页应用程序提供动力。

如果您是一位经验丰富的前端开发人员，并且想知道 Vue.js 与其他库/框架相比如何，请查看 与其他框架的比较；如果您更感兴趣的是 Vue.js 如何处理大型应用程序，请查看关于 构建大型应用程序 的部分。

响应式数据绑定

Vue.js 的核心是一个响应式数据绑定系统，它使保持数据和 DOM 同步变得极其简单。当使用 jQuery 手动操作 DOM 时，我们编写的代码通常是命令式的、重复的和容易出错的。Vue.js 拥抱 数据驱动视图 的概念。简单来说，这意味着我们在普通的 HTML 模板中使用特殊的语法来“绑定”DOM 到底层数据。一旦绑定创建，DOM 就会与数据保持同步。每当您修改数据时，DOM 都会相应地更新。因此，我们应用程序中的大多数逻辑现在都是直接操作数据，而不是处理 DOM 更新。这使我们的代码更易于编写、更易于理解和更易于维护。

最简单的示例

<!-- this is our View -->
<div id="example-1">
  Hello {{ name }}!
</div>

// this is our Model
var exampleData = {
  name: 'Vue.js'
}
// create a Vue instance, or, a "ViewModel"
// which links the View and the Model
var exampleVM = new Vue({
  el: '#example-1',
  data: exampleData
})

结果

这看起来非常类似于渲染模板，但 Vue.js 在幕后做了很多工作。数据和 DOM 现在已链接，并且一切都已 响应式。我们怎么知道？只需打开浏览器开发者控制台并修改 exampleData.name。您应该看到上面的渲染示例相应地更新。

请注意，我们不必编写任何 DOM 操作代码：使用绑定增强的 HTML 模板是底层数据状态的声明式映射，而底层数据状态只是普通的 JavaScript 对象。我们的视图完全是数据驱动的。

让我们看第二个示例

<div id="example-2">
  <p v-if="greeting">Hello!</p>
</div>

var exampleVM2 = new Vue({
  el: '#example-2',
  data: {
    greeting: true
  }
})

在这里，我们遇到了新东西。您看到的 v-if 属性称为 指令。指令以 v- 为前缀，表示它们是 Vue.js 提供的特殊属性，正如您可能猜到的那样，它们对渲染的 DOM 应用特殊的响应式行为。继续在控制台中将 exampleVM2.greeting 设置为 false。您应该看到“Hello！”消息消失。

第二个示例表明，我们不仅可以将 DOM 文本绑定到数据，还可以将 DOM 的 结构 绑定到数据。此外，Vue.js 还提供了一个强大的过渡效果系统，可以在 Vue 插入/删除元素时自动应用过渡效果。

还有很多其他指令，每个指令都有其特殊的功能。例如，用于显示数组中项目的 v-for 指令，或用于绑定 HTML 属性的 v-bind 指令。我们将在后面详细讨论完整的 data-binding 语法。

组件系统

组件系统是 Vue.js 中的另一个重要概念，因为它是一种抽象，使我们能够构建由小型、自包含且通常可重用的组件组成的复杂应用程序。如果我们仔细想想，几乎任何类型的应用程序界面都可以抽象成一个组件树

事实上，一个典型的使用 Vue.js 构建的大型应用程序将形成右侧的内容 - 一个组件树。我们将在后面的指南中更多地讨论组件，但这里是一个（虚构的）示例，说明应用程序的模板使用组件时的样子

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

您可能已经注意到，Vue.js 组件与 自定义元素 非常相似，它是 Web 组件规范 的一部分。事实上，Vue.js 的组件语法是根据规范松散建模的。例如，Vue 组件实现了 Slot API 和 is 特殊属性。但是，也有一些关键区别

1. Web 组件规范仍然处于开发阶段，并非所有浏览器都原生实现。相比之下，Vue.js 组件不需要任何 polyfill，并且在所有支持的浏览器（IE9 及更高版本）中都能一致地工作。在需要时，Vue.js 组件也可以包装在原生自定义元素中。

2. Vue.js 组件提供了普通自定义元素中没有的重要功能，最值得注意的是跨组件数据流、自定义事件通信以及带有过渡效果的动态组件切换。

组件系统是使用 Vue.js 构建大型应用程序的基础。此外，Vue.js 生态系统还提供了高级工具和各种支持库，可以将它们组合在一起以创建一个更像“框架”的系统。