【零基础入门VUE】在 Vue 中构建复杂表单

面向读者:所有人

所属专栏:零基础入门VUE专栏https://blog.csdn.net/arthas777/category_12537076.html

目录

v-modelVue 中的 指令

Vue 中的组件

没有构建步骤

随着构建步骤

注册 VUE 组件 

Vue 道具

VUE 中的道具声明 

在 VUE 中传递 PROPS

Vue 中的事件处理

事件修饰符

关键修饰符

指令v-for _ 

列表渲染

v-for与组件一起 使用

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

设置 Vue 应用程序

创建 JSON 文件来托管表单数据

创建可重用组件

注册输入组件

传递输入数据

结论


有可能,在我们的软件工程之旅中,我们至少必须构建一次复杂的表单。本文将介绍如何创建一个复杂的表单,可以使用一些 Vue 功能(例如 和v-for)逐步增强该表单v-model。它还回顾了一些基本的 Vue 核心功能,这些功能在您日常使用 Vue 时构建复杂的表单时会派上用场。

通常,网络工程师总是有理由构建从简单到复杂的表单。对于工程师来说,在构建大型和复杂的表单时,代码库变得极其混乱和不协调的冗长也是工程师们熟悉的痛苦。因此引出了一个问题:“如何优化?”。

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

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

v-modelVue 中的 指令

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

就是v-model这样的指令,它负责表单输入值和属性中存储的值之间的双向数据绑定data。适用v-model于任何输入元素,例如 theinput或 theselect元素。在底层,它结合了输入的输入值和相应的更改事件侦听器,如下所示:






事件input用于元素。同样,对于v-model将依次将值与change事件匹配。

Vue 中的组件

可重用性是软件工程的核心原则之一,强调在软件项目中使用现有的软件功能或资产,其原因包括最大限度地减少开发时间和节省成本。

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

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

  • 没有构建步骤,
  • 随着构建步骤。

没有构建步骤

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

template: `
  

Vue component without the build step

`

随着构建步骤

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


在上面的代码中,我们

在 HTML