每日鸡汤：不要因为懒惰，错过本该属于你的人生，这个世界上优秀的人很多，你做不到的总有人能做到，不要因为自己的懒散而错过本该属于你的人生。
目录
前言
一、双向绑定
1. 表单的类型
2.表单和v-model
3. 插值表达式
二、修饰符
1. .lazy
2..trim
三、组件上的v-model
1.封装h5原生的input
（1）组件内不使用v-model，但使用value+input
（2）组件内也使用v-model
2. 封装组件库(ant-design-vue)的input
（1）组件内不使用v-model，但使用value+input
（2）组件内也使用v-model
3. 使用v-model参数
总结
前言
本篇文章对应的vue官网【表单输入绑定】这一部分很复杂，很重要
一、双向绑定
1. 表单的类型
textareaselectinput （包括checkbox，radio）请记住，一般提到表单类型，就是指的是上面说的这三种，checkbox和radio,都可以算作是input的延伸。这样记，因为表单要求有输入，回忆一下，能够输入的原生组件没有其他的了吧。
看下官方文档
2.表单和v-model
v-modal可以和上述所有的表单进行绑定，只是不同表单，绑定的事件不同
3. 插值表达式
我猜肯定有人不知道这个概念，就是在开始标签和闭合标签之间写内容，比如div和p
<div>这是插值表达式</div>
还有 空元素，就是单标签的元素，就是没有结束标签，常见的有input、hr、img等，这个我在面试的过程中真的遇到过
<img src="xxx" /><input value="X" />
二、修饰符
1. .lazy
将v-model的数据更新时机，由input事件后，改为change事件后
2..trim
这个很好用，通常用在搜索框中，因为一般来说，向后台传递一个检索的字符串是需要去除首尾空格的。
三、组件上的v-model
这部分对应官网【组件事件，配合v-model使用】
组件上的v-model最常用的场景是自己封装一个input组件，封装input组件还分为两种情况一种是封装h5原生的input，另一种是封装组件库的input控件，其实他俩的方法是一样的。
1.封装h5原生的input
让我们使用input封装一个组件OInput
（1）组件内不使用v-model，但使用value+input
<!--OInput.vue--><template><input:value="modelValue"@input="$emit('update:modelValue', ($event?.target as HTMLInputElement).value)"/></template><script lang="ts" setup>import { defineEmits, defineProps } from 'vue';const props = defineProps({modelValue: String,});const emits = defineEmits(['update:modelValue']);</script>
<!--appa.vue引入组件--><template>当前的值：{{name}}<o-input v-model="name"></o-input></template><script lang="ts" setup>import { ref } from 'vue';import OInput from './component/OInput.vue';const name = ref('init value')</script><style>#app {}</style>
让我们画一下重点
这样就可以实现双向绑定，正如官网的例子，
（2）组件内也使用v-model
上面的例子中OInput内的input绑定没有使用v-model，是有外面调用组件的时候使用了，例子2是都使用v-model ，这就用到了，计算属性
2. 封装组件库(ant-design-vue)的input
方法都是一样的，无论用哪种方法都可以实现功能。
（1）组件内不使用v-model，但使用value+input
（2）组件内也使用v-model
看下ant-design-vue官网的例子，亲测，不写:value，无效
3. 使用v-model参数
使用v-model的参数，也就是说我们在定义我们封装的组件的时候，props的变量可以不用modelValue，如果你看modelValue他不顺眼，那就换成value好了。
总结
vue3中关于v-model记住一下几点
默认绑定的组件的props的属性是modelValue，而不是valuev-model可以加参数，实现多个变量的双向绑定
