Vue.js 2

Vue.js




vue

什么是Vue.js?

Vue(发音为/vjuː/,与view一样)是构建用户界面的渐进框架 。 与其他单一框架不同,Vue从头开始被设计为可以逐步采用。 核心库只专注于视图层,并且很容易与其他库或现有项目集成。 另一方面,与现代工具支持库结合使用时,Vue也完全能够为复杂的单页应用程序提供动力。

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

入门

官方指南假设了HTML,CSS和JavaScript的中级知识。 如果您对前端开发完全陌生,那么作为您的第一步,进入框架并不是最好的主意 - 掌握基础然后回来! 以前的其他框架经验有所帮助,但不是必需的。

试用Vue.js的最简单方法是使用JSFiddle Hello World示例 。 随意在另一个选项卡中打开它,然后继续阅读一些基本示例。 或者,您可以创建一个index.html文件并将Vue包括在内:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Installation页面提供了更多安装Vue的选项。 注意:我们建议初学者以vue-cli开头,特别是如果您还不熟悉基于Node.js的构建工具。

声明式渲染

Vue.js的核心是一个系统,它使我们能够使用直接的模板语法声明性地向DOM呈现数据:

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

我们已经创建了我们第一个Vue应用程序! 这看起来与渲染字符串模板非常相似,但Vue在底层做了很多工作。 数据和DOM现在已链接,并且所有内容现在都处于被动状态 。 我们怎么知道? 打开浏览器的JavaScript控制台(现在,在此页面上)并将app.message设置为不同的值。 你应该看到上面的渲染示例相应地更新。

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

<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应用特殊的反应行为。 在这里,它基本上是说“使用Vue实例上的message属性使该元素的title属性保持最新。”

如果您再次打开JavaScript控制台并输入app2.message = 'some new message' ,您将再次看到绑定的HTML(本例中为title属性)已更新。

条件和循环

切换元素的存在也很容易:

<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指令可用于使用来自Array的数据显示项目列表:

<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' }
    ]
  }
})

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

处理用户输入

为了让用户与您的应用程序进行交互,我们可以使用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('')
    }
  }
})

请注意,在此方法中,我们更新应用程序的状态而不触及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!'
  }
})

与组件组合

组件系统是Vue中的另一个重要概念,因为它是一种抽象,它允许我们构建由小型,自包含且经常可重用的组件组成的大型应用程序。 如果我们考虑一下,几乎任何类型的应用程序接口都可以抽象为组件树:

组件树

在Vue中,组件基本上是一个Vue实例,它具有预定义的选项。 在Vue中注册一个组件非常简单:

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

现在你可以将它编写在另一个组件的模板中:

<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' }
    ]
  }
})

这是一个人为的例子,但我们已经设法将我们的应用程序分成两个较小的单元,并且通过道具界面将孩子合理地与父母分离。 我们现在可以用更复杂的模板和逻辑进一步改进我们的<todo-item>组件,而不会影响父应用程序。

在大型应用程序中,有必要将整个应用程序分为多个组件,以使开发更易于管理。 我们将在本指南稍后讨论更多关于组件的内容 ,但下面是一个应用程序模板可能与组件类似的(虚构)示例:

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

与自定义元素的关系

您可能已经注意到Vue组件与自定义元素非常相似,它们是Web组件规范的一部分 。 这是因为Vue的组件语法在规范之后被松散地建模。 例如,Vue组件实现了Slot API并且is特殊属性。 但是,有几个关键的区别:

  1. Web组件规范仍处于草稿状态,并未在每个浏览器中实现。 相比之下,Vue组件不需要任何polyfills,并且可以在所有支持的浏览器(IE9及更高版本)中始终如一地工作。 如果需要,Vue组件也可以包装在本地自定义元素中。

  2. Vue组件提供了在简单的自定义元素中不可用的重要功能,特别是跨组件数据流,自定义事件通信和构建工具集成。

准备好更多?

我们简要介绍了Vue.js核心的最基本功能 - 本指南的其余部分将介绍它们以及其他具有更多细节的高级功能,因此请务必仔细阅读!