Vue表单的整体处理

在前端的处理中，表单的处理永远是占高比例的。在BOM+DOM+js的时候是这样，在Vue的时候也是这样。Vue的表单处理做了特别的优化，如值绑定、数据验证、错误提示、修饰符等。

表单组件的示例：

<script setup lang="ts">
import {ref} from "vue"
import axios from "axios"

   const name=ref("");
   const gender=ref("");
   const birthDate=ref("");
   const phone=ref("");
   const applyReason=ref("");
   const scopes=ref([]);
   const luckyNumber=ref(1);

   function submitForm(){
      axios({
         method:"post",
         url:"",
         params:{
            name:name.value,
            gender:gender.value,
            birthDate:birthDate.value,
            phone:phone.value,
            applyReason:applyReason.value,
            scopes:scopes.value,
            lunckyNumber:luckyNumber.value
         }
      }).then((res)=>{
         console.log(res);
      });
   }

   function resetForm(){
       name.value="";
       gender.value="";
       birthDate.value="";
       phone.value="";
       applyReason.value="";
       scopes.value=[];
       luckyNumber.value=1;
   }
</script>

<template>
<form>
   <div>
      <div>
          姓名:
          <input v-model="name" id="name" placeholder="input your name"/>
      </div>
      <div>
          性别:
          <input type="radio" value="male" id="male" v-model="gender"/>
          <lable for="male">男</lable>
          <input type="radio" value="female" id="female" v-model="gender"/>
          <lable for="female">女</lable>
      </div>
      <div>
         出生日期:
         <input type="date" id="birthDate" v-model="birthDate"/>
      </div>
      <div>
         手机号码:
         <input type="text" v-model="phone"/>
      </div>
      <div>
          申请理由:
          <textarea v-model="applyReason" placeholder="add reason here"></textarea>
      </div>
      <div>
          涉猎范围:
          <input type="checkbox" id="reading" value="reading" v-model="scopes"/>
          <lable for="reading">阅读</lable>
          <input type="checkbox" id="sports" value="sports" v-model="scopes"/>
          <lable for="sports">运行</lable>
          <input type="checkbox" id="dreaming" value="dreaming" v-model="scopes"/>
          <lable for="dreaming">冥想</lable>
          <input type="checkbox" id="playing" value="playing" v-model="scopes"/>
          <lable for="playing">操作</lable>
      </div>
      <div>
         幸运数字:
         <select name="select" v-model="luckyNumber">
               <option selected>1</option>
               <option>2</option>
               <option>3</option>
               <option>4</option>
               <option>5</option>
               <option>6</option>
               <option>7</option>
               <option>8</option>
               <option>9</option>
         </select>
      </div>
      <div>
            <button type="button" @click="submitForm">提交</button>
            <button type="button" @click="resetForm">重置</button>
      </div>
   </div>    
</form>
</template>

<style>

</style>

v-model在Vue中有三种修饰符：

v-model.lazy ：由原来的input事件之后更新v-model的值改为change事件之后更新v-model的值，这对复合组件和计算属性有很大的作用

v-model.number  ：用户输入的内容会被自动转换为数字，输入框有type="number"时会自动启用

v-model.trim  ：用户的输入内容会自动去除两端的空格