v-model的实现原理

v-model实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定。原理很简单，主要包括属性绑定和事件监听两部分，

一、v-model的原理

①v-bind绑定一个value属性

②v-on指定给当前元素绑定input事件

<input type='text' :value='id' @input='id = $event.target.value'>

原理解释：

• 通过 v-bind:value 绑定 id 变量，每次输入内容的时候触发input事件
• 通过事件对象参数$event.target.value 获得输入的内容，并且把这个内容赋值给id
• 此时更改uname时input输入框会变化，更改input输入框时id变量会变，从而实现了v-model的双向绑定功能

二、使用v-model

绑定v-model，使用模板语法显示双向绑定的值。

我使用的组合式API，要使绑定的数据成为响应式数据，要使用ref

<script setup>
import {ref} from 'vue'
const id = ref('')
</script>
<template>
     v-model双向数据绑定 {{ id }}
     <el-input v-model.trim="id" clearable placeholder="请输入用户名"
     style="height: 40px; font-size: 16px;"></el-input>
</template>