vue之v-model的原理

想必大家都了解v-model可以实现双向数据绑定，它是如何实现的呢？让我为大家介绍一下吧！
原理: v-model本质上是一个语法糖例如应用在输入框上，就是 value属性 和 input事件 的合写
作用:提供数据的双向绑定
1.数据发生改变，页面会自动变 :value
请输入搜索关键字
2.页面输入改变，数据会自动变 @input
注意：$event 用于在模板中，获取事件的形参

<template>
  <div>
    <input v-model="msg1" type="text"><br><br>
    <!-- v-model的原理 -->
    <!-- 我们先使用v-bind绑定 我们使用input事件 -->
    <!-- 我们通常使用e.target获取到元素 但在这我们需要使用$event -->
    <input :value="msg2" @input="msg2 = $event.target.value" type="text">
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg1: '',
      msg2: ''
    };
  },
};
</script>
<style scoped></style>

我们发现我们成功的实现了双向数据绑定

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！