v-model 是 Vue 将数据绑定与事件监听封装的语法糖，通过 :value 和 @input（或 @change）实现双向同步；支持 .lazy、.number、.trim 等修饰符；自定义组件需接收 modelValue prop 并触发 update:modelValue 事件；Vue 3 还支持多 v-model 绑定和自定义修饰符。
v-model 不是魔法，它是 Vue 把数据绑定和事件监听打包好的语法糖。它让表单控件的值和变量始终保持同步：你改输入框，变量跟着变；你改变量，输入框也立刻更新。
原生表单元素上的 v-model 是怎么工作的
在 <input>、<textarea>、<select> 上用 v-model，Vue 会自动拆解成两件事：
- :value —— 把变量的当前值作为控件的显示内容
- @input（或 @change / @update）—— 监听用户操作，把新值回写到变量里
不同控件默认监听的事件不同：
文本框监听 input（边输边触发），
复选框和单选框监听 change（选完才触发），
下拉框也监听 change。
v-model 修饰符：让绑定更贴合业务需求
加个点号就能微调行为，不用自己写额外逻辑：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
-
.lazy：把监听从input换成change，适合大段文本或需要失焦才提交的场景 -
.number：自动转数字类型，空输入会变成NaN，注意后续判空处理 -
.trim：自动去掉首尾空格，登录用户名、搜索关键词常用 - 多个可连用，比如
v-model.lazy.trim
自定义组件支持 v-model 的关键约定
想让自己的 <DatePicker> 或 <Switch> 也能用 v-model，必须遵守两个约定：
- 接收名为
modelValue的 prop（Vue 3 默认，Vue 2 是value） - 当值变化时，触发
update:modelValue事件，并传入新值
这样父组件才能用 <MyInput v-model="name" />，而不用写一堆 :value 和 @input。
多字段绑定与自定义修饰符（Vue 3 特性）
Vue 3 支持一个组件上绑定多个 v-model，比如姓名拆成“姓”和“名”：
- 父组件：
<UserForm v-model:first-name="firstName" v-model:last-name="lastName" /> - 子组件需声明对应 prop 和
update:firstName、update:lastName事件 - 还能定义自己的修饰符，比如
v-model.capitalize，在子组件中通过modelModifiers判断是否启用首字母大写逻辑
