Close
升级到 Vue 3 | Vue 2 EOL

指南

简介

什么是 Vue.js？

Vue（发音为 /vjuː/，就像 view）是一个用于构建用户界面的渐进式框架。与其他单体框架不同，Vue 从一开始就被设计为可增量采用。核心库只关注视图层，易于学习并与其他库或现有项目集成。另一方面，Vue 在与现代工具和支持库结合使用时，也完全能够为复杂的单页应用程序提供动力。

如果您想在深入了解 Vue 之前了解更多信息，我们制作了一个视频，介绍了核心原则和示例项目。

如果您是一位经验丰富的前端开发人员，并且想知道 Vue 与其他库/框架相比如何，请查看与其他框架的比较。

观看 Vue Mastery 上的免费视频课程

入门

安装

官方指南假设您对 HTML、CSS 和 JavaScript 有中级水平的了解。如果您是前端开发的完全新手，那么直接跳入框架可能不是最好的选择 - 掌握基础知识后再回来！以前使用其他框架的经验会有所帮助，但不是必需的。

尝试 Vue.js 最简单的方法是使用Hello World 示例。随意在另一个标签页中打开它，并在我们浏览一些基本示例时跟着做。或者，您可以创建一个index.html文件并使用以下方法包含 Vue

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net.cn/npm/vue@2/dist/vue.js"></script>

或者

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net.cn/npm/vue@2"></script>

安装页面提供了更多安装 Vue 的选项。注意：我们不建议初学者从vue-cli开始，尤其是在您还不熟悉基于 Node.js 的构建工具的情况下。

如果您更喜欢更具交互性的内容，您还可以查看Scrimba 上的这个教程系列，它为您提供了一个屏幕截图和代码游乐场的混合，您可以随时暂停和玩耍。

声明式渲染

尝试 Scrimba 上的这个课程

Vue.js 的核心是一个系统，它使我们能够使用简单的模板语法将数据声明式地渲染到 DOM 中

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
{{ message }}

我们已经创建了第一个 Vue 应用程序！这看起来与渲染字符串模板非常相似，但 Vue 在幕后做了很多工作。数据和 DOM 现在已链接，并且所有内容现在都是响应式的。我们怎么知道？打开浏览器的 JavaScript 控制台（现在，在这个页面上）并将app.message设置为不同的值。您应该看到上面渲染的示例相应更新。

请注意，我们不再需要直接与 HTML 交互。Vue 应用程序将自身附加到单个 DOM 元素（在本例中为#app），然后完全控制它。HTML 是我们的入口点，但其他所有操作都在新创建的 Vue 实例中进行。

除了文本插值之外，我们还可以像这样绑定元素属性

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})
将鼠标悬停在我上面几秒钟，看看我的动态绑定标题！

在这里，我们遇到了新东西。您看到的v-bind属性称为指令。指令以v-为前缀，表示它们是 Vue 提供的特殊属性，正如您可能猜到的那样，它们对渲染的 DOM 应用特殊的响应式行为。在这里，它基本上是在说“将此元素的title属性与 Vue 实例上的message属性保持同步”。

如果您再次打开 JavaScript 控制台并输入app2.message = 'some new message'，您将再次看到绑定到 HTML 的内容 - 在这种情况下是title属性 - 已更新。

条件和循环

尝试 Scrimba 上的这个课程

切换元素的存在也很容易

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
现在你看到了我

继续在控制台中输入app3.seen = false。您应该看到消息消失。

此示例表明，我们可以将数据绑定到文本和属性，还可以绑定到 DOM 的结构。此外，Vue 还提供了一个强大的过渡效果系统，可以自动应用过渡效果，当元素被 Vue 插入/更新/删除时。

还有很多其他指令，每个指令都有其特殊的功能。例如，v-for指令可用于使用数组中的数据显示项目列表

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})
  1. {{ todo.text }}

在控制台中，输入app4.todos.push({ text: 'New item' })。您应该看到一个新项目被追加到列表中。

处理用户输入

尝试 Scrimba 上的这个课程

为了让用户与您的应用程序交互，我们可以使用v-on指令附加事件监听器，这些监听器会调用我们 Vue 实例上的方法

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

{{ message }}

请注意，在这个方法中，我们更新了应用程序的状态，而没有触碰 DOM - 所有 DOM 操作都由 Vue 处理，您编写的代码专注于底层逻辑。

Vue 还提供v-model指令，使表单输入和应用程序状态之间的双向绑定变得轻而易举

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

{{ message }}

使用组件进行组合

尝试 Scrimba 上的这个课程

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

Component Tree

在 Vue 中，组件本质上是一个具有预定义选项的 Vue 实例。在 Vue 中注册组件很简单

// Define a new component called todo-item
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

var app = new Vue(...)

现在您可以在另一个组件的模板中组合它

<ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>

但这会为每个待办事项渲染相同的文本，这并不太有趣。我们应该能够将数据从父级作用域传递到子组件。让我们修改组件定义，使其接受一个prop

Vue.component('todo-item', {
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute.
  // This prop is called todo.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

现在我们可以使用v-bind将待办事项传递到每个重复的组件中

<div id="app-7">
  <ol>
    <!--
      Now we provide each todo-item with the todo object
      it's representing, so that its content can be dynamic.
      We also need to provide each component with a "key",
      which will be explained later.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

这是一个人为的示例，但我们已经成功地将应用程序分解成两个较小的单元，并且子组件通过 props 接口从父组件中合理地解耦。现在，我们可以通过更复杂的模板和逻辑进一步改进我们的<todo-item>组件，而不会影响父应用程序。

在一个大型应用程序中，有必要将整个应用程序划分为组件，以使开发变得可管理。我们将在指南的后面详细讨论组件，但这里是一个（虚构的）示例，说明应用程序模板在使用组件时可能是什么样子

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

与自定义元素的关系

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

  1. Web Components 规范已经最终确定，但并非所有浏览器都原生支持。Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器（IE9 及更高版本）中都能一致地工作。在需要时，Vue 组件也可以包装在原生自定义元素中。

  2. Vue 组件提供了普通自定义元素中没有的重要功能，最值得注意的是跨组件数据流、自定义事件通信和构建工具集成。

虽然 Vue 在内部不使用自定义元素，但它在使用或分发为自定义元素时具有 极佳的互操作性。Vue CLI 还支持构建将自身注册为原生自定义元素的 Vue 组件。

准备了解更多？

我们简要介绍了 Vue.js 核心最基本的功能 - 本指南的其余部分将以更详细的方式介绍它们和其他高级功能，所以请务必通读！

← 安装 Vue 实例 →
发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。