vue 的 v-model 底层原理

vue 的 v-model 底层原理

v-model 双向数据绑定 📦

1.一般情况… 🔥

1. 数据变化了，视图自动更新。 (绑定 动态属性 v-bind => 数据)

​ ==> 相当 绑定了 v-bind:value ,即 :value ,

2. 视图变化了，数据自动更新. ( 绑定 注册事件 v-on => 视图)

​ ==> 相当于 绑定了 v-on:input事件,即 @:input ,

原理:

用 :value侦听 用户 输入的留言 , 然后 通过 @:input事件处理更新视图

示例如下:

    <h3>:value 和 @input组合</h3>
    <!-- v-model写法：<input type="text" v-model="msg"> -->
    <input type="text" :value="msg2" @input="msg2 = $event.target.value"> <!-- 底层原理 -->
				<!-- 代码只有一行可以不写methods函数 -->

模板中使用 $event 可以获取 事件的形参，因为是原生i