零、前言
Vue.js 是世界领先、发展最快的前端开发框架之一。它温和的学习曲线和充满活力和帮助的社区使它成为许多希望利用前端框架力量的新开发人员的一个简单选择。此外，它的灵活性和强大功能使它成为高级开发人员和公司使用它作为强大、动态和精益应用程序和网站的主要工具的一个简单选择。
在使用 Vue.js 的建筑表单中，我们将探索前端开发表单的特定部分。我们将一起旅行，从创建最基本的表单一直到理解一个完全动态、模式驱动的表单是如何工作的。
这本书是给谁的
使用 Vue.js 构建表单面向对 Vue.js 框架有基本了解并希望了解如何更好地创建功能强大且可重用表单的前端开发人员。
这本书涵盖的内容
第 1 章建立示范项目将指导您建立我们将在本书中建立的项目基础。建议您按照各章的顺序阅读本书，因为它们建立在前几章所学概念的基础上。但是，如果您想向前跳过，则会在每章的开头提供每章的完整代码。
第 2 章最简单的表单展示了构建基本 web 表单的基础知识，以及将输入连接到应用程序状态的过程。您还将了解提交表单以及使用 Axios 库对后端进行异步调用的基础知识。
第 3 章创建可重用表单组件将教您如何将表单分解为可在整个应用程序中重用的组件。您将了解[T0]指令是如何工作的，以及主应用程序和表单是如何利用这些组件的。
第 4 章带 v-mask 的输入掩码涉及使用v-mask库允许输入掩码以改善用户体验。您将学习如何实现第三方插件，以及如何将它们合并到自定义组件中。
第 5 章使用 Vuelidate进行输入验证，引导您完成将 Vuelidate—一个功能强大的表单验证库添加到项目、创建验证规则并将其应用到表单以及如何将其纳入自定义组件的过程。
第 6 章使用 Vuex移动到全局状态，通过利用 Vuex 官方全局状态管理库和模式的强大功能，将当前应用程序的本地状态转移到全局状态，使事情更进一步。我们将把 Vuelidate 和我们的定制组件合并到混合中。
第 7 章创建模式驱动表单将前面的所有概念结合在一起，引导您了解和创建渲染器组件的过程，该组件允许您的应用程序完全由模式驱动。它将对模拟 API 提供的 API 更改做出反应，并解释如何生成完整构造的表单，并将数据提交到模拟后端。
充分利用这本书
为了让你能轻松地阅读这本书，我必须对你这方面已有的知识做一些假设。以下是您需要的基本要求清单，以便充分利用本书：
- 您以前使用过 HTML、CSS 和 JavaScript，并且能够轻松地创建基本的 web 应用程序。
- 您熟悉
console.log语句以及 Chrome 等浏览器中 web 应用程序的一般调试。 - 终端命令的基本知识。您至少应该知道如何使用[T0]命令导航文件夹。
- 您了解 Vue 的基本概念，例如状态、反应性、插值、计算属性和方法。请务必查看官方指南的要点部分以供参考：https://vuejs.org/v2/guide/ 。
- 您可以访问计算机和 internet 连接来下载和安装所需的库和项目文件。
在本书的第一章中，我们将介绍如何使用一个易于遵循的步骤列表来设置您的项目。
下载示例代码文件
您可以从您的账户www.packt.com下载本书的示例代码文件。如果您在其他地方购买了本书，您可以访问www.packtpub.com/support并注册，将文件通过电子邮件直接发送给您。
您可以通过以下步骤下载代码文件：
- 登录或注册“T0”www.packt.com“T1”
- 选择“支持”选项卡。
- 点击代码下载。
- 在搜索框中输入图书名称，然后按照屏幕上的说明进行操作。
下载文件后，请确保使用以下最新版本解压或解压缩文件夹：
- WinRAR/7-Zip for Windows
- 适用于 Mac 的 Zipeg/iZip/UnRarX
- 适用于 Linux 的 7-Zip/PeaZip
该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/Building-Forms-with-Vue.js 。如果代码有更新，它将在现有 GitHub 存储库中更新。
我们的丰富书籍和视频目录中还有其他代码包，请访问https://github.com/PacktPublishing/ 。看看他们！
下载彩色图像
我们还提供了一个 PDF 文件，其中包含本书中使用的屏幕截图/图表的彩色图像。您可以在这里下载：https://static.packt-cdn.com/downloads/9781839213335_ColorImages.pdf 。
行动中的代码
访问以下链接以查看正在运行的代码的视频：
使用的惯例
本书中使用了许多文本约定。
CodeInText：表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄。下面是一个示例：“让我们开始安装v-mask库。”
代码块设置如下：
<input
type="text"
v-model="form.telephone"
v-mask="'(###)###-####'"
>
任何命令行输入或输出的编写方式如下：
> npm install v-mask
粗体：表示一个新术语、一个重要单词或您在屏幕上看到的单词。例如，菜单或对话框中的单词出现在文本中，如下所示。下面是一个示例：“返回第一个选项卡，响应&正文。”
Warnings or important notes appear like this. Tips and tricks appear like this.
联系
我们欢迎读者的反馈。
一般反馈：如果您对本书的任何方面有疑问，请在邮件主题中注明书名，并发送电子邮件至customercare@packtpub.com。
勘误表：尽管我们已尽一切努力确保内容的准确性，但还是会出现错误。如果您在本书中发现错误，如果您能向我们报告，我们将不胜感激。请访问www.packtpub.com/support/errata，选择您的书籍，单击 errata 提交表单链接，然后输入详细信息。
盗版：如果您在互联网上发现我们作品的任何形式的非法复制品，请您提供我们的位置地址或网站名称，我们将不胜感激。请通过copyright@packt.com与我们联系，并提供该材料的链接。
如果您有兴趣成为一名作家：如果您对某个主题有专业知识，并且您有兴趣撰写或贡献一本书，请访问authors.packtpub.com。
评论
请留下评论。一旦你阅读并使用了这本书，为什么不在你购买它的网站上留下评论呢？然后，潜在读者可以看到并使用您的无偏见意见做出购买决定，我们 Packt 可以了解您对我们产品的看法，我们的作者可以看到您对他们书籍的反馈。非常感谢。
有关 Packt 的更多信息，请访问Packt.com。
版权属于：月萌API www.moonapi.com，转载请注明出处
