官方文档：表单输入绑定
基本用法：input/textarea/checkbox/radio/select/form
修饰符：.lazy/.number/.trim
v-model：vue数据双向绑定方法

textarea双向绑定

<textarea v-model="message" placeholder="edit me"/>
<p>Message is: {{message}}</p>

input双向绑定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<button @click="message = ''">清空Message</button>

input type="checkbox"，复选单选，双向绑定

<label class="labelSelect">
  <input type="checkbox" v-model="select">
  <span>Selected: {{select}}</span>
</label>

input type="checkbox"，复选多选，双向绑定，

注意，其中checkedNames: [],是一个数组，值得注意的是，value="386"代表值是字符串386，:value="586"代表值是双引号内的表达式，这里是数值586，甚至还可以是一个变量

<div class="labelSelect">
  <input type="checkbox" id="1" value="张三" v-model="checkedNames">
  <span>jack</span>
  <input type="checkbox" id="2" value="李四" v-model="checkedNames">
  <span>tom</span>
  <input type="checkbox" id="3" value="王五" v-model="checkedNames">
  <span>has</span>
  <input type="checkbox" id="4" value="386" v-model="checkedNames">
  <span>386</span>
  <input type="checkbox" id="5" :value="586" v-model="checkedNames">
  <span>586</span>
</div>
<p>CheckNames: {{checkedNames}}</p>

input type="radio"，多选项单选，双向绑定

<div class="labelSelect">
  <input type="radio" name="CEO"  id="11" value="张三" v-model="checkedName">
  <span>jack</span>
  <input type="radio" name="CEO" id="12" value="李四" v-model="checkedName">
  <span>tom</span>
  <input type="radio" name="CEO" id="13" value="王五" v-model="checkedName">
  <span>has</span>
  <input type="radio" name="CEO" id="14" value="386" v-model="checkedName">
  <span>386</span>
  <input type="radio" name="CEO" id="15" :value="586" v-model="checkedName">
  <span>586</span>
</div>

select option下拉框单选双向绑定

<div>
  <select v-model="optionSelected">
    <option disabled>请选择</option>
    <option value="ZhangSan">张三</option>
    <option>李四</option>
    <option>王五</option>
  </select>
</div>
<p>已选择:{{ optionSelected }}</p>

如果要改成多选，在select后加上multiple，绑定到一个数组上

<select multiple v-model="optionSelecteds">

form表单

<form>
  <label>
    <span>用户名</span>
    <input type="text">
  </label>
  <label>
    <span>密码</span>
    <input type="password">
  </label>
  <button>登录</button>
</form>

1，这是最简单的form表单，form标签内，有input标签和button标签（这个button标签是必须的），光标在input输入框时，按下回车键，页面会刷新；
2，如果要获取到form标签提交的值，怎么获取？在form标签上绑定提交事件：
<form v-on:submit="onsubmit">
这样，无论回车还是点击button按钮，都能触发提交事件，执行onsubmit函数.
3，数据如何绑定？在input中，用v-model绑定数据，在form的回调方法中，可以直接获取到最新的数据；

<form v-on:submit="onsubmit">
  <label>
    <span>用户名</span>
    <input type="text" v-model="user.name">
  </label>
  <label>
    <span>密码</span>
    <input type="password" v-model="user.password">
  </label>
  <button>登录</button>
</form>

data(){
  return {
    user:{
      name:undefined,
      password:undefined,
    }
  }
},
methods:{
  onsubmit(){
    console.log(`form submit：`, this.user);
  }
}

v-model的修饰符

1. .lazy修饰符，表示input在change时触发更新
2. .number修饰符，表示input的内容要转换为数字再传递给data
3. .trim修饰符，内容前后的空格trim掉

v-model的本质

主要就是v-bind:value=adds让数据从data传递给input，同时v-on:input="adds = $event.target.value"让数据从input传递给data，实现双向传递

<input type="text" placeholder="请输入地址" v-bind:value="adds" v-on:input="adds = $event.target.value">
<p>adds has input: {{adds}}</p>

自定义input使用v-model

这是自定义input

<template>
  <input type="text" v-bind:value="value" v-on:input="$emit('input',$event.target.value)">
</template>
<script>
export default {
  name: "MyInput",
  props:["value"],
}
</script>
<style scoped>
</style>

这是使用自定义input

<MyInput v-bind:value="adds" v-on:input="adds=$event"/>
<MyInput v-model="adds"/>

Ant Design Vue

官方教程
安装指定版本的话，要加上版本号 yarn add ant-design-vue@1.5.1
安装时可能遇到的问题： webpack < 5 used to include polyfills for node.js core modules by default