vue项目使用ant-desgin-vue的form表单组件的简单用法

首先带领大家从ant-desgin-vue官网入手，通过官网来学习用法

首先进入 ant-desgin-vue的官网

网址：Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

进入官网要做两件事

首先点击 中文按钮 其次打开 导航 文档

然后 点击左边菜单栏 ant-desgin-vue 接着滚动鼠标 到如下图位置

通过vue项目在vscode的终端就可以 进行组件的安装

npm install ant-design-vue@4.x --save

yarn add ant-design-vue@4.x

用npm进行举例如下图

如何判断是否安装成功

点击项目的packge.json

准备工作做好以后 我们点击 antdv官网顶部导航的 组件

然后去到form

鼠标悬浮到这个区域滑动鼠标 然后看见 API了进行点击

关于form的API

先埋下一个伏笔 直接带大家上手 

接下来我们要实现下面这个样子

阅读这篇文章的小伙伴 ，可以按照接下来的步骤在自己的vue项目里面创建一个页面进行复制粘贴然后显示效果

<template>
    <!-- 表单布局 -->
    <a-form>
      <!-- 在vue中使用antdv组件 都是a-xxx 比如 a-table a-form -->
      <a-form-item></a-form-item>
      <a-form-item></a-form-item>
      <a-form-item>
        
      </a-form-item>
    </a-form>
</template>

<script setup></script>

<style scoped>

</style>

搭好了架子以后 就要开始 给form绑定属性

表单的名字一个叫 username 一个叫 password

那么我们就要给a-form-item 绑定一个属性 label

<template>
    <!-- 表单布局 -->
    <a-form>
      <!-- 在vue中使用antdv组件 都是a-xxx 比如 a-table a-form -->
      <a-form-item label="uaername"></a-form-item>
      <a-form-item label="password"></a-form-item>
      <a-form-item>

      </a-form-item>
    </a-form>
</template>

<script setup></script>

<style scoped>

</style>

然后表单是输入框的性质 那么就要给表单加上 a-input

<template>
    <!-- 表单布局 -->
    <a-form>
      <!-- 在vue中使用antdv组件 都是a-xxx 比如 a-table a-form -->
      <a-form-item label="uaername">
        <a-input></a-input>
      </a-form-item>
      <a-form-item label="password">
        <a-input></a-input>
      </a-form-item>
      <a-form-item>

      </a-form-item>
    </a-form>
</template>

<script setup></script>

<style scoped>

</style>

然后表单有个submit的按钮

添加一个a-button

基本的样式就已经搭建好了

然后 作为前端使用表单不仅仅是样式 我们同样需要数据的交互，那么表单最重要的一个交互就是表单的验证 我们如何把输入的数据进行放入一个容器然后进行搬迁，比如前端自己验证，或者数据搬迁给后端验证。

所以 如何实现表单数据的打包 API里面就有一个model参数 叫表单数据对象 

用法如下

<template>
    <!-- 表单布局 -->
    <a-form :model="formData">
      <!-- 在vue中使用antdv组件 都是a-xxx 比如 a-table a-form -->
      <a-form-item name="name" label="uaername">
        <a-input v-model:value="formData.username"></a-input>
      </a-form-item>
      <a-form-item name="password" label="password">
        <a-input v-model:value="formData.password"></a-input>
      </a-form-item>
      <a-form-item>
          <a-button>submit</a-button>
      </a-form-item>
    </a-form>
</template>

<script setup>
import {ref} from "vue"

const formData = ref()

</script>

<style scoped>

</style>

至此，form表单的简单用法就结束了 ，一些表单验证的方法使用，就可以去andtv官网进行学习