搜索 登录注册
×

热门关键词：Web前端|前端开发|HTML5|CSS3|jQuery|CSS3动画

Vue表单应用：从基础开始教你如何在 Vue 中构建复杂表单

作者：Terry2025.03.11来源：Web前端之家浏览：1415评论:0
关键词：Vue组件

Vue 表单

在我们的软件工程旅程中，我们很有可能至少需要构建一次复杂的表单。本文将介绍如何创建复杂的表单，该表单可以使用一些 Vue 功能（例如v-for和 ）逐步增强v-model。它还重温了一些基本的 Vue 核心功能，这些功能在日常使用 Vue 构建复杂表单时会派上用场。

很多时候，网页工程师总是有理由构建表单，从简单到复杂。对于工程师来说，构建大型复杂表单时代码库很快就会变得非常混乱和冗长，这也是一个常见的痛点。因此，不禁要问：“如何优化？”

考虑这样一个业务场景：我们需要建立一个包含姓名和电子邮件的候补名单。此场景仅需要两个/三个输入字段（视具体情况而定），并且可以快速添加，几乎不会有任何麻烦。现在，让我们考虑一个不同的业务场景：用户需要填写一个包含 5 个部分中的 10 个输入字段的表单。编写 50 个输入字段不仅对工程师来说是一项累人的工作，而且还浪费了大量的技术时间。更重要的是，它违背了臭名昭著的“不要重复自己”（DRY）原则。

在本文中，我们将重点学习使用 Vue 组件、v-model指令和 Vue props 在 Vue 中构建复杂的表单。

v-model Vue 中 的指令

Vue 有几个独特的 HTML 属性，称为指令，以 为前缀v-。这些指令执行不同的功能，从在 DOM 中渲染数据到操作数据。

就是v-model这样一个指令，它负责在表单输入值和存储在属性中的值之间进行双向数据绑定data。v-model适用于任何输入元素，例如input或select元素。在底层，它将输入的输入值和相应的更改事件侦听器组合在一起，如下所示：

<!-- Input element -->
<input v-model="inputValue" type="text">

<!-- Select element -->
<select v-model="selectedValue">
  <option value="">Please select the right option</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

事件input用于<input type= "text">元素。同样，对于<select> … </select>、<input type= "checkbox">和<input type= "radio">，v-model会依次将值与change事件进行匹配。

Vue中的组件 

可重用性是软件工程的核心原则之一，强调在软件项目中使用现有软件功能或资产，以尽量缩短开发时间到节省成本。

我们观察 Vue 可重用性的方式之一是通过使用组件。Vue 组件是可重用的模块化接口，具有自己的逻辑和自定义内容。尽管它们可以像常规 HTML 元素一样相互嵌套，但它们也可以独立工作。

Vue 组件可以通过以下两种方式构建：

  • 如果没有构建步骤，

  • 随着构建步骤。

没有构建 步骤

无需使用Vue 命令行界面 (CLI)即可创建 Vue 组件。此组件创建方法在 Vue 实例选项属性中定义一个 JavaScript 对象。在下面的代码块中，我们内联了一个 Vue 可动态解析的 JavaScript 字符串。

template: `
  <p> Vue component without the build step </p>
  `

使用构建 步骤

使用构建步骤创建组件需要使用Vite — 一款速度超快的轻量级构建工具。使用构建步骤创建 Vue 组件会生成单文件组件 (SFC)，因为它可以满足文件的逻辑、内容和样式。

<template>
  <p> Vue component with the build step </p>
</template>

在上面的代码中，我们<p>在 HTML<template>标签内有一个标签，当我们使用应用程序的构建步骤时，该标签会被呈现。

注册 Vue 组件

创建 Vue 组件是 Vue 中可重用性和模块化的第一步。接下来是创建的 Vue 组件的注册和实际使用。

Vue 组件允许在组件内嵌套组件，甚至允许在全局或父组件内嵌套组件。

假设我们将使用构建步骤创建的组件存储在一个BuildStep.vue文件中。为了使此组件可供使用，我们将它导入另一个 Vue 组件或.vue，例如根入口文件。导入此组件后，我们可以在componentsoption 属性中注册组件名称，从而使该组件可用作 HTML 标记。虽然此 HTML 标记将具有自定义名称，但 Vue 引擎会将它们解析为有效的 HTML 并在浏览器中成功呈现它们。

<!-- App.vue -->
<template>
  <div>
    <BuildStep />
  </div>
</template>

<script>
import BuildStep from './BuildStep.vue'

export default {
  components: {
    BuildStep
  }
}
</script>

从上面，我们将BuildStep.vue组件导入到文件中App.vue，在 option 属性中注册它components，然后在我们的 HTML 模板中将其声明为<BuildStep />。

Vue Props

Vue props，也称为属性，是组件上用于将数据从父组件传递到子组件的自定义属性。当我们需要一个具有不同内容但视觉布局恒定的组件时，props 就会派上用场，因为组件可以拥有尽可能多的 props。

Vue prop 具有单向数据流，即从父组件到子组件。因此，父组件拥有数据，子组件无法修改数据。相反，子组件可以发出父组件可以记录的事件。

Vue中的 Props 声明 

让我们考虑下面的代码块：

<template>
  <p> Vue component {{ buildType }} the build step</p>
</template>

<script>
export default {
  props: {
    buildType: {
      type: String
    }
  }
}
</script>

我们用插值更新了 HTML 模板buildType，它将被执行并替换为从父组件传递下来的 props 的值。

我们还在 props 选项属性中添加了一个props标签，用于监听 props 的变化并相应地更新模板。在这个 props 选项属性中，我们声明了 props 的名称，该名称与<template>标签中的内容相匹配，还添加了props 类型。

props 类型可以是字符串、数字、数组、布尔值或对象，它充当规则或检查来确定我们的组件将接收什么。

在上面的例子中，我们添加了一种 String 类型；如果我们尝试传递任何其他类型的值（例如布尔值或对象），我们将收到错误。

在Vue中传递 Props 

为了完成这一点，我们将更新父文件，即，App.vue并相应地传递 props。

<!-- App.vue -->
<template>
  <div>
    <BuildStep buildType="with"/>
  </div>
</template>

<script>
import BuildStep from './BuildStep.vue'

export default {
  components: {
    BuildStep
  }
}
</script>

现在，当构建步骤组件被呈现时，我们将看到如下所示的内容：

Vue component with the build step

有了 props，我们不需要从头创建一个新的组件来显示组件是否有构建步骤。我们可以再次声明<BuildStep />组件并添加相关的构建类型。

<!-- App..vue -->
<template>
  <div>
    <BuildStep buildType="without"/>
  </div>
</template>

同样，就像构建步骤一样，当组件被渲染时，我们将得到以下视图：

Vue component without the build step

上述代码块中的按钮标签有一个附加到checkBuildType方法的点击事件。当此按钮被点击时，它会执行一个检查组件构建类型的函数。

事件修饰符

该v-on指令有多个事件修饰符，用于向事件处理程序添加唯一属性v-on。这些事件修饰符以点开头，位于事件修饰符名称的后面。

<form @submit.prevent="submitData">
 ...
<!-- This enables a form to be submitted while preventing the page from being reloaded. -->
</form>

键修饰符

键修饰符可帮助我们即时监听键盘事件，例如enter、和 。键修饰符与等指令page-up绑定，其中可以是和。v-onv-on:eventname.keymodifiernameeventnamekeyupmodifiernameenter

<input @keyup.enter="checkInput">

键修饰符也提供了灵活性，但允许多个键名称链接。

<input @keyup.ctrl.enter="checkInput">

在这里，在调用该方法之前，键名将监听ctrl和键盘事件。entercheckInput

指令v-for 

就像 JavaScript 提供使用类似循环来迭代数组一样for，Vue-js 也提供了一个称为的内置指令来v-for执行相同的功能。

我们可以将v-for语法写为，item in items其中项目是我们正在迭代的数组，或者items of items表达与 JavaScript 循环语法的相似性。

列表渲染

让我们考虑在页面上渲染组件构建步骤的类型。

<template>
  <div>
    <ul>
        <li v-for="steps in buildSteps" :key="steps.id"> {{ steps.step }}</li>
      </ul>
  </div>
</template>

<script>
export default {
 data() {
   return {
     buildSteps: [
      {
       id: "step 1",
       step:'With the build step',
      },
      {
        id: "step 2",
       step:'Without the build step'
      }
    ]
   }
 }
}
</script>

在上面的代码块中，属性steps中的数组data显示了组件的两种构建步骤。在我们的模板中，我们使用v-for指令来循环遍历步骤数组，我们将在无序列表中呈现其结果。

我们添加了一个可选key参数，表示当前正在迭代的项目的索引。但除此之外，它还key接受一个唯一标识符，使我们能够跟踪每个项目的节点，以进行正确的状态管理。

v-for与组件 一起使用

就像使用渲染列表一样v-for，我们也可以使用它来生成组件。我们可以v-for像下面这样将指令添加到组件中：

<BuildStep v-for="steps in buildSteps" :key="steps.id"/>

上面的代码块不会对渲染或将 传递step给组件做太多事情。相反，我们需要将 as props 的值传递step给组件。

<BuildStep v-for="steps in buildSteps" :key="steps.id" :buildType="steps.step" />

我们采取上述措施是为了防止任何v-for与组件紧密的固定。

在不同用法中，需要注意的最重要的一点v-for是长时间流程的自动化。我们可以从手动列出 100 个项目或组件转变为使用v-for指令，并在一秒钟内渲染所有内容（视情况而定）。

在Vue中构建复杂的注册表单 

我们将结合所学到的有关v-model、Vue 组件、Vue props、v-for指令和事件处理的知识来构建一个复杂的表单，以帮助我们实现效率、可扩展性和时间管理。

该表格将用于记录学生的个人简历，随着业务需求的增加，我们将不断改进该表格以促进其逐步增强。

设置 Vue应用

我们将使用构建步骤来搭建我们的 Vue 应用程序。为此，我们需要确保安装了以下内容：

  • 节点.js；

  • npm或yarn。

现在我们将通过运行以下命令来创建我们的 Vue 应用程序：

# npm
npm init vue@latest vue-complex-form

其中vue-complex-form是 Vue 应用程序的名称。

之后，我们将在 Vue 项目的根目录运行以下命令：

npm install

创建 JSON 文件来承载表单数据

我们的目标是创建一个表单，用户可以在其中填写自己的详细信息。虽然我们可以手动添加所有输入字段，但我们将使用不同的方法来简化我们的代码库。我们将通过创建一个名为的 JSON 文件来实现这一点util/bio-data.json。在每个 JSON 对象中，我们将拥有我们希望每个输入字段具有的基本信息。

[
  {
    "id": 1,
    "inputvalue":"  ",
    "formdata": "First Name",
    "type": "text",
    "inputdata": "firstname"
  },
  {
    "id": 2,
    "inputvalue":"  ",
    "formdata": "Last Name",
    "type": "text",
    "inputdata": "lastname"
  },
]

如上面的代码块所示，我们创建了一个对象，其中的一些键已经带有值：

  • id作为单个对象的主要标识符；

  • inputvalue将迎合传递到的值v-model；

  • formdata将处理输入占位符和标签名称；

  • type表示输入类型，例如电子邮件、数字或文本；

  • inputdata代表输入的id和name。

这些键的值稍后将作为 props 传递给我们的组件。我们可以在此处访问完整的 JSON 数据。

创建可重用组件

我们将创建一个输入组件，该组件将从我们创建的 JSON 文件中传递 props。此输入组件将使用v-for指令进行迭代，以便一次性创建大量输入字段实例，而无需手动将其全部写出。为此，我们将创建一个components/TheInputTemplate.vue文件并添加以下代码：

<template>
  <div>
    <label :for="inputData">{{ formData }}</label>
    <input
      :value= "modelValue"
      :type= "type"
      :id= "inputData"
      :name= "inputData"
      :placeholder= "formData"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  </div>
 </template>
 
<script>
export default {
  name: 'TheInputTemplate',
  props: {
    modelValue: {
      type: String
    },
    formData: {
      type: String
    },
    type: {
      type: String
    },
    inputData: {
      type: String
    }
  },
  emits: ['update:modelValue']
}
</script>
<style>
label {
  display: inline-block;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  color: rgb(61, 59, 59);
  font-weight: 700;
  font-size: 0.8rem;
}
input {
  display: block;
  width: 90%;
  padding: 0.5rem;
  margin: 0 auto 1.5rem auto;
}
</style>

在上面的代码块中，我们实现了以下功能：

  • 我们创建了一个带有输入字段的组件。

  • 在输入字段中，我们将从 JSON 文件传递的值与元素中各个感兴趣的位置进行匹配。

  • modelValue我们还创建了、formData、type和的 props ，inputData它们将在导出时注册到组件上。这些 props 将负责从父文件获取数据并将其传递给TheInputTemplate.vue组件。

  • modelValue将prop 与输入值的值绑定。

  • 添加了，当事件触发update:modelValue时会发出。input

注册输入组件

我们将导航到我们的App.vue文件并导入TheInputTemplate.vue组件，然后我们就可以继续使用它了。

<template>
  <form class="wrapper">
    <TheInputTemplate/>
  </form>
</template>
<script>
import TheInputTemplate from './components/TheInputTemplate.vue'
export default {
  name: 'App',
  components: {
    TheInputTemplate
  }
}
</script>
<style>
html, body{
  background-color: grey;
  height: 100%;
  min-height: 100vh;
}
.wrapper {
  background-color: white;
  width: 50%;
  border-radius: 3px;
  padding: 2rem  1.5rem;
  margin: 2rem auto;
}
</style>

这里我们将TheInputTemplate.vue组件导入到文件中App.vue，在选项属性中注册它components，然后在我们的 HTML 模板中声明它。

如果我们运行npm run serve，我们应该看到以下视图：

image.png

此时，我们看不到太多内容，因为我们尚未在组件上注册 props。

传递输入数据

为了获得我们想要的结果，我们需要传递输入数据并将 props 添加到组件。为此，我们将更新我们的App.vue文件：

<template>
  <div class="wrapper">
    <div v-for="bioinfo in biodata" :key="bioinfo.id">
      <TheInputTemplate v-model="bioinfo.inputvalue":formData= "bioinfo.formdata":type= "bioinfo.type":inputData= "bioinfo.inputdata"/>
    </div>
  </div>
<script>
//add imports here
import biodata from "../util/bio-data.json";
export default {
  name: 'App',
 //component goes here
  data: () => ({
    biodata
  })
}
</script>

从上面的代码块中，我们实现了几件事：

  • 我们将创建的个人资料 JSON 文件导入到App.vue文件中。然后将导入的变量添加到dataVue 脚本的选项中。

  • 循环遍历 JSON 数据，我们使用 Vuev-for指令在数据选项中实例化它。

  • 在我们创建的组件中TheInputTemplate.vue，传入合适的数据来填充 props 选项。

此时我们的界面应该如下所示：

image.png

为了确认我们的应用程序是否正常运行，我们将打开 Vue DevTools，或者如果我们的浏览器中还没有安装，则从https://devtools.vuejs.org安装一个。

当我们在任何输入字段中输入一个值时，我们都可以看到该值显示在modelValueVue Devtools 仪表板中。

image.png

结论 

在本文中，我们探讨了一些核心 Vue 基础知识，例如v-for、v-model等等，后来我们将它们拼接在一起以构建复杂的表单。本文的主要目标是简化构建复杂表单的过程，同时保持可读性和可重用性并减少开发时间。

如果在任何情况下都需要扩展表单，开发人员只需将所需信息填充到 JSON 文件中，表单就准备好了。此外，新工程师可以避免在冗长的代码行中摸索，以了解代码库中正在发生的事情。

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

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

发表评论:

相关文章