×

Vue基础讲解:渲染 Vue 组件列表应用

作者:Terry2023.07.18来源:Web前端之家浏览:1274评论:0
关键词:vuejs

adddd.png

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

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

先决条件:

熟悉核心HTML、 CSS和 JavaScript语言,了解 终端/命令行。

Vue 组件被编写为管理应用程序数据的 JavaScript 对象和映射到底层 DOM 结构的基于 HTML 的模板语法的组合。为了安装和使用 Vue 的一些更高级的功能(例如单文件组件或渲染功能),您需要一个安装了 Node + npm 的终端。

客观的:了解如何循环访问数据数组并将其呈现在多个组件中。

使用 v-for 渲染列表

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

添加一些数据进行渲染

首先我们需要获取一系列待办事项。为此,我们将向组件对象添加一个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...inv-for="item in items"itemsitem

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

关键属性

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

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

以与组件相同的方式导入lodash.uniqueid到组件中,使用 AppToDoItem

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

image.png


有机会进行轻微重构

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

  1. 向您的ToDoItem组件添加一个新的 prop — id.

  2. 使其成为必需,并将其类型设为 a String

  3. 为了防止名称冲突,请iddata属性中删除该字段。

  4. 您不再使用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,就像其他所有内容一样,所以事情现在更加合乎逻辑和一致。

概括

这将我们带到另一篇文章的结尾。现在,我们已经有了示例数据,以及一个循环,该循环获取每一位数据并将其呈现在ToDoItem我们应用程序的 a 中。

接下来我们真正需要的是能够允许用户在应用程序中输入自己的待办事项,为此我们需要一个 text <input>、一个在提交数据时触发的事件、一个在提交时触发的方法来添加数据并重新渲染列表,以及控制数据的模型。我们将在下一篇文章中讨论这些内容。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20230718.html

网友评论文明上网理性发言 已有0人参与

发表评论: