Vue 3 表单
讲师:Vue Msatery Team
口袋资源独家Vue Mastery付费课程,独家中英文字幕,配套资料齐全!
用不到1/10的价格,即可享受同样的高品质课程,且可以完全拥有,随时随地都可以任意观看和分享。
从登录和注册屏幕到设置和结帐页面,表单可以说是与我们的 Web 应用程序的最终用户交互并从他们那里收集有价值信息的最重要的工具。
Vue 使构建各种表单变得有趣和容易,从像搜索栏这样的单一输入表单到复杂的模式驱动表单,这一切都归功于 Vue 的组件驱动架构和反应系统。
基于组件的框架
Vue 当然是一个基于组件的框架,我们可以在其中创建一段代码并在我们的应用程序中多次重用它。props
这些组件通过和相互通信events
,通过这些连接我们创建了一个动态的交互式应用程序。
表单尤其受益于将元素的逻辑封装到组件中。随着我们的应用程序的增长,通常我们的表单也会增长,并且拥有一个没有组件构建的表单通常会成为一颗定时炸弹。
在某些时候,您可能需要更改所有输入元素的外观,或者使它们根据标签表现不同,甚至引入不同类型的输入验证。当表单中的输入未封装到组件中时,所有这些场景都会变得更加复杂。
你会学到什么
在本课程中,我们将构建一组表单组件来处理表单输入的最常见用例。它们将具有高度可重用性,能够根据您的任何应用程序需求进行调整和扩展。
在构建这些组件时,您将了解这些组件如何通过 、和与您的表单v-model
以及彼此进行通信的基本概念。props
listeners
我们将学习一些关于如何捕获和提交表单的最佳实践,最后我们将了解表单可访问性的基础知识。
通过开发人员工具带中的这些概念和新工具,您将能够为您自己的应用程序构建和理解任何范围的表单。
先决条件
为了充分利用本课程,您应该具备以下概念的经验:
- 基本了解什么
v-model
是原生表单输入以及它如何与原生表单输入交互。如果您还不熟悉它,我建议您查看我们的Vue 3 入门课程。
在本课程中,我们将复习这些概念,但不会像本课程那样冗长和详细。相反,我们将结合这些概念,同时关注 Vue 3 如何简化和增强表单组件组合。
准备好跳进去了吗?我们第一节课见!