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

什么是双向数据绑定

        在Vue中，我们可以通过 v-bind 他的数据是单向流向页面的，称之为单向数据绑定。那么肯定就有小伙伴问了，那既然有了单向数据绑定，那是不是有双向数据绑定呢？ 你没猜错 作者我告诉你 必须得有，v-model 他来了。

        通过 v-model 数据不光可以从data中流向页面，也可以从页面流向data，这样，我们就可以获取到用户在页面输入的数据了，这就是 双向数据绑定。

我们回到官网来说：

        你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

        v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

通过官网的了解，我们发现了 v-model 他本质上就是一个语法糖。简单来说 那就是让人写的爽。

双向绑定原理总结： 

对于原理来说，想要了解什么原理 我们当然得来阅读官网咯，不然你真以为作者是大佬啊。。。

有句老话说的好啊，不懂就要问 但问谁 这是个问题。对于Vue来说，官网是必须要问滴，毕竟官方解答必属正品啊。

官网是这样说的：

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

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

 通过官网来看，是不是有一些小伙伴不知道怎么理解了。那作者就来简单的翻译一下：

        v-model 相当于 v-bind数据绑定+v-on事件绑定。

是不是还有点不太懂 那就用一个例子来说明下:

<template>
  <div id="app">
    v-model: <input type="text" v-model="message"><br><br>
    <!--等同于下方的 -->
    v-bind+v-on: <input type="text" v-bind:value="message" @input="change">
    <!--也可以直接使用 $event.target.value来获取当前value值 -->
    v-bind+v-on: <input type="text" v-bind:value="message" @input="message = $event.target.value">
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data() {
    return {
      message:'测试'
    }
  },
    methods: {
       change(event) {
            //表格的value值发生变化时,message的值也会变化  ,同时message的值也是value值
            this.message = event.target.value
         }
     }
}
</script>

<style>


</style>

说明：

event        event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。

target        事件属性可返回事件的目标节点（触发该事件的节点）

event.target.value        获得当前操作元素的value值

当你触发input事件时，$event 是当前的事件对象。 $event.target.value指向的是当前的input的值。

测试效果图：

好了，就说这么多了。相信看到这小伙伴们都懂得了双向数据绑定的原理了，江湖路远，山高水长，我们就此别过。