Vue基础讲解：渲染 Vue 组件列表应用-工具盒子

今天分享一个简单的Vue基础知识点：渲染 Vue 组件列表应用。

此时我们已经有了一个完全可以工作的组件；我们现在准备ToDoItem向我们的应用程序添加多个组件。在本文中，我们将研究向组件添加一组待办事项数据App.vue，然后使用指令循环并在ToDoItem组件内部显示这些数据v-for。

| 先决条件： | 熟悉核心HTML、 CSS和 JavaScript语言，了解终端/命令行。 Vue 组件被编写为管理应用程序数据的 JavaScript 对象和映射到底层 DOM 结构的基于 HTML 的模板语法的组合。为了安装和使用 Vue 的一些更高级的功能（例如单文件组件或渲染功能），您需要一个安装了 Node + npm 的终端。 | | 客观的： | 了解如何循环访问数据数组并将其呈现在多个组件中。 | |-------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

使用 v-for 渲染列表 {#rendering_lists_with_v-for}

为了成为一个有效的待办事项列表，我们需要能够呈现多个待办事项。为此，Vue 有一个特殊指令v-for. 这是一个内置的 Vue 指令，它允许我们在模板中包含一个循环，为数组中的每个项目重复渲染模板功能。我们将使用它来迭代一系列待办事项，并将它们显示在我们的应用程序中的单独ToDoItem组件中。

添加一些数据进行渲染 {#adding_some_data_to_render}

首先我们需要获取一系列待办事项。为此，我们将向组件对象添加一个data属性App.vue，其中包含ToDoItems一个值为待办事项数组的字段。虽然我们最终将添加一种机制来添加新的待办事项，但我们可以从一些模拟待办事项开始。每个待办事项将由一个具有 alabel和 adone属性的对象表示。

添加一些示例待办事项，如下所示。这样您就可以使用一些可用于渲染的数据v-for。

export default {
  name: "app",
  components: {
    ToDoItem,
  },
  data() {
    return {
      ToDoItems: [
        { label: "Learn Vue", done: false },
        { label: "Create a Vue project with the CLI", done: true },
        { label: "Have fun", done: true },
        { label: "Create a to-do list", done: false },
      ],
    };
  },
};

现在我们有了一个项目列表，我们可以使用v-for指令来显示它们。指令像其他属性一样应用于元素。在的情况下，您使用类似于JavaScript 中的循环的v-for特殊语法-其中是您要迭代的数组，是对数组中当前元素的引用。for...in``v-for="item in items"``items``item

v-for附加到要重复的元素，并呈现该元素及其子元素。<li>在本例中，我们希望为数组中的每个待办事项显示一个元素ToDoItems。然后我们希望将每个待办事项的数据传递给组件ToDoItem。

关键属性 {#key_attribute}

在我们这样做之前，还需要了解另一种与属性一起使用的v-for语法key。为了帮助 Vue 优化列表中元素的渲染，它会尝试修补列表元素，这样就不会在每次列表更改时重新创建它们。然而，Vue 需要帮助。为了确保它正确地重用列表元素，它需要在您附加的同一元素上有一个唯一的"键" v-for。

为了确保 Vue 能够准确地比较key属性，它们需要是字符串或数值。虽然使用名称字段会很棒，但该字段最终将由用户输入控制，这意味着我们无法保证名称是唯一的。但是，我们可以使用lodash.uniqueid()，就像我们在上一篇文章中所做的那样。

以与组件相同的方式导入lodash.uniqueid到组件中，使用 App``ToDoItem

import uniqueId from "lodash.uniqueid";

接下来，id向数组中的每个元素添加一个字段ToDoItems，并为每个元素分配一个值uniqueId('todo-')。<script>中的元素现在App.vue应具有以下内容：

import ToDoItem from "./components/ToDoItem.vue";
import uniqueId from "lodash.uniqueid";

export default {
  name: "app",
  components: {
    ToDoItem,
  },
  data() {
    return {
      ToDoItems: [
        { id: uniqueId("todo-"), label: "Learn Vue", done: false },
        {
          id: uniqueId("todo-"),
          label: "Create a Vue project with the CLI",
          done: true,
        },
        { id: uniqueId("todo-"), label: "Have fun", done: true },
        { id: uniqueId("todo-"), label: "Create a to-do list", done: false },
      ],
    };
  },
};

现在，将v-for指令和key属性添加到模板<li>中的元素App.vue，如下所示：

<ul>
  <li v-for="item in ToDoItems" :key="item.id">
    <to-do-item label="My ToDo Item" :done="true"></to-do-item>
  </li>
</ul>

当您进行此更改时，除了其他组件属性之外，标记之间的每个 JavaScript 表达式<li>都将有权访问该值。item这意味着我们可以将项目对象的字段传递给我们的ToDoItem组件 - 只需记住使用v-bind语法即可。这非常有用，因为我们希望待办事项将其label属性显示为标签，而不是"我的待办事项"的静态标签。此外，我们希望它们的选中状态能够反映它们的done属性，而不是始终设置为done="true"。

将属性更新label="My ToDo Item"为:label="item.label"，将:done="true"属性更新为:done="item.done"，如下面的上下文所示：

<ul>
  <li v-for="item in ToDoItems" :key="item.id">
    <to-do-item :label="item.label" :done="item.done"></to-do-item>
  </li>
</ul>

现在，当您查看正在运行的应用程序时，它将显示待办事项及其正确名称，如果您检查源代码，您将看到所有输入都具有唯一的ids，取自组件中的对象App。

有机会进行轻微重构 {#chance_for_a_slight_refactor}

我们可以在这里进行一点重构。我们可以将变成prop ，而不是id为组件内的复选框生成。虽然这并不是绝对必要的，但它使我们更容易管理，因为无论如何我们已经需要为每个待办事项创建一个唯一的。ToDoItem``id``id

向您的ToDoItem组件添加一个新的 prop --- id.
使其成为必需，并将其类型设为 a String。
为了防止名称冲突，请id从data属性中删除该字段。
您不再使用uniqueId，因此您需要删除该import uniqueId from 'lodash.uniqueid';行，否则您的应用程序将引发错误。

<script>组件中的内容现在ToDoItem应该如下所示：

export default {
  props: {
    label: { required: true, type: String },
    done: { default: false, type: Boolean },
    id: { required: true, type: String },
  },
  data() {
    return {
      isDone: this.done,
    };
  },
};

现在，在您的App.vue组件中，将item.id其作为 prop 传递给ToDoItem组件。您的App.vue模板现在应如下所示：

<template>
  <div id="app">
    <h1>My To-Do List</h1>
    <ul>
      <li v-for="item in ToDoItems" :key="item.id">
        <to-do-item
          :label="item.label"
          :done="item.done"
          :id="item.id"></to-do-item>
      </li>
    </ul>
  </div>
</template>

当您查看渲染的站点时，它看起来应该是相同的，但是我们的重构现在意味着我们id是从内部数据中获取App.vue并作为 prop 传递进去的ToDoItem，就像其他所有内容一样，所以事情现在更加合乎逻辑和一致。