vue3+ant-design-vue使用

1.路由的使用

在xxx.vue中进行跳转时，要在script中引入：

import { useRouter } from 'vue-router';//模块中引入 useRouter 函数

const router = useRouter() //调用 useRouter 函数，将返回的 Vue Router 实例赋值给变量 router

router.push("/test");//跳转

2.input标签的使用

1.在template标签下

<div class="form-group">
          <label for="username" style="display: inline-block; width: 40px;">姓名:</label>
          <a-input type="text" id="username" :value="formData.username" placeholder="请输入姓名" style="display: inline-block; width: 200px;" @change="handlerChangeMyValue('username',$event)"/>
</div>

对以上代码进行解释：
1.class=“form-group"使名叫form-group的style样式
2.姓名:：这是一个标签元素，用于显示标签文本“姓名:”，并且通过 for=“username” 属性指定了关联的输入框的 id 为"username”。样式设置 display: inline-block; width: 40px; 可以使标签和输入框在同一行显示。
3.<a-input type=“text” id=“username” :value=“formData.username” placeholder=“请输入姓名” style=“display: inline-block; width: 200px;” @change=“handlerChangeMyValue(‘username’, $event)” />：这是一个 Ant Design Vue 的输入框组件 ，用于用户输入姓名。具体解释如下：
type=“text”：指定输入框类型为文本输入。
id=“username”：指定输入框的 id 为"username"，与上面的标签关联。
:value=“formData.username”：使用 Vue 的数据绑定语法，将 formData.username 的值绑定到输入框的值，实现数据的双向绑定。
placeholder=“请输入姓名”：设置输入框的占位符文本。
style=“display: inline-block; width: 200px;”：设置输入框的样式，使其显示为内联块元素并设置宽度为200px。
@change=“handlerChangeMyValue(‘username’, $event)”：当输入框的值发生变化时，触发 handlerChangeMyValue 方法，并传递参数 ‘username’ 和事件 $event。

1.主要是要注意要使用 :value=“formData.username”.而不是v-model进行绑定
2.ant-design-vue的input标签关联输入框要使用@change="handlerChangeMyValue(‘username’,$event)
username是输入的数值，event传入的事件。

2.在script中，实现函数

const handlerChangeMyValue = (key,event)=>{
      console.info(event.target.value);
      formData[key].value = event.target.value;
    }

解释含义：
a：const handlerChangeMyValue = (key, event) => {：这是一个箭头函数的定义，接受两个参数 key 和 event。key 是用于标识要更新的数据对象中的属性名，event 是触发输入框变化事件时传递的事件对象。

b：console.info(event.target.value);：这行代码会在控制台输出输入框变化事件中的 event.target.value，即用户输入的新值。

c：formData[key].value = event.target.value;：这行代码根据传入的 key 来更新 formData 对象中对应属性的值。假设 key 是 ‘username’，那么会将输入框的新值 event.target.value 赋给 formData[‘username’].value。

3.使用方法
先在setup（）下声明一个ref函数

const formData = {
       username : ref("111"),
       studentId : ref(1)
    }

然后绑定提交按钮，并且输入值

 const submit = () => {
      const formData2 = {
        username : formData["username"].value,
        studentId : formData["studentId"].value,
      };
      console.log("1: ", formData);
      axios.post('http://localhost:8989/submit-form', formData2)
          .then(response => {
            console.log(response.data);
            router.push("/test");
          })
          .catch(error => {
            console.error(error);
          });
    };