vue的v-model双向数据绑定原理

双向数据绑定(v-model)

v-model就是vue的双向绑定指令，能将页面上空间输入的值同步更新到相关绑定的属性，也会在更新data绑定属性的时候，更新页面上输入控件的值

v-model的原理:

主要就是view层与data中的数据相互影响，相互改变，这是作者的理解，

我们可以来看看官网给出的解释：

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

• v-bind绑定响应数据
• 触发input事件并传递数据  

 <!-- 原生DOM当中是有oninput事件：当表单元素发生文本的变化的时候就会立即触发 -->
<input type="text":value="msg" @input="msg = $event.target.value">
<span>{{msg}}</span>
 
<!-- 等同于下面 -->
<input type="text" v-model="msg">
 
 
 
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
         msg:"我是数据"
      }
    },
  }
</script>

好了，这些就是作者了解的v-model基本原理，如果想深入了解的，可以参考官方文档