vue中v-module的双向绑定原理

vue中v-module的双向绑定原理

直接上知识点（拿笔记）：

1、何为双向绑定？即用户在页面上操作后，使数据发生改变，从而改变的该数据在vue中的对象的值；在vue中的数据因为某个计算过程或者接口请求，使初始化的数据发生改变，从而改变页面上的数据。

2、双向绑定是如何做到的？即数据绑定和事件绑定；通过v-bind将数据绑定给标签的value，达到使vue的数据在页面上展示；通过v-on绑定的input事件，将event.target.value绑定给vue的数据，达到使vue的数据同步界面操作后的数据。

上代码：

    <div id="app">
        {{msg}}
        <!-- 将value属性和msg数据进行绑定,那么msg数据变化时也会影响到value -->
        <div><input v-bind:value='msg' v-on:input='handle' type="text"></div>
    </div>
    <script src="../vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'hello'
            },
            methods: {
                handle: function (e) {
                    //表格的value值发生变化时,msg的值也会变化  ,同时msg的值也是value值
                    this.msg = e.target.value;
                }
            }
        })
    </script>