什么是双向数据绑定

双向数据绑定首先是如果数据容器中的数据改变了会让页面刷新就是DOM操作让页面改变，然后是如果用户操作了页面从而改变了页面反之也会让数据容器中的数据发生改变。

双向数据绑定的技术

    <div id="app">
        <p>{{msg}}</p>
        <div>
            <input type="text" :value="msg">
        </div>
        <button @click="change">改变数据容器中的值</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"hello"
            },
            methods: {
                change(){
                    // 响应式数据
                    this.msg="hi";//底层会执行this对象的msg属性的setter函数先将值保存然后去自动刷新页面
                }
            },
        });
    </script>

当this对象的msg属性值发生改变，页面上使用该属性的地方也会发生改变，这就是响应式数据，但是当用户在输入框中输入了值页面发生了变化但此时并不会改变msg属性值，是单向的并不是双向的

在原生的DOM操作中我们需要先获取用户输入框中的值然后再将值赋值给变量，而Vue不建议我们直接操作DOM所以只需要使用官方提供的v-module指令就可以完成双向数据绑定，在Vue框架中v-module指令可以完成，但是React框架就需要我们自己去实现，实现的方式就是v-module指令的底层原理。

双向数据绑定的技术就是v-module指令是一个语法糖其底层原理就是:value和@input（官方提供事件绑定的指令）或者:oninput（这个利用了属性绑定事件）的合成

 <input type="text" v-model="msg">

指令的底层原理

    <div id="app">
        <p>{{msg}}</p>
        <div>
            <input type="text" :value="msg" @input="getinfo">
        </div>
        <button @click="change">改变数据容器中的值</button>
        <button @click="look">查看数据容器中的值</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"hello"
            },
            methods: {
                change(){
                    // 响应式数据
                    this.msg="hi";//底层会执行this对象的msg属性的setter函数先将值保存然后去自动刷新页面
                },
                look(){
                    console.log(this.msg);
                },
                getinfo(e){
                    // e就是事件对象，先获取e.target就是事件目标源也就是input输入框这个节点对象，然后就可以获取其value值

                    // 双向数据绑定
                    this.msg=e.target.value;
                }
            },
        });
    </script>