v-model是如何实现的

实现原理:

v-model 只不过是一个语法糖而已,真正的实现靠的还是:
1、v-bind:绑定响应式数据
2、触发 oninput 事件并传递数据,并且在触发 input 事件的时候去动态把 message 设置为目标值

1
2
3
4
5
6
7
8
9
10
11
<input v-model="message" />
等同于
<input
v-bind:value="message"
v-on:input="message=$event.target.value"

$event 指代当前触发的事件对象;
$event.target 指代当前触发的事件对象的 dom;
$event.target.value 就是当前 dom 的 value 值;
在@input 方法中,value => message;
在:value 中,message => value;

v-model是如何实现的
http://example.com/2023/04/12/v-model是如何实现的/
作者
dinghw
发布于
2023年4月12日
许可协议