<div id="app">
       
    </div>

<script>
    
    new Vue({
        el:'#app',
        template:`
            <div>
                <input type="text" v-bind:value='msg' v-on:input='change' />
                <p>{{ msg }}</p>
            </div>
        `,
        data (){
            return {
                msg:'hello双向数据绑定'
            }
        },
        methods:{
            change(e){
                this.msg = e.target.value;
            }
        }
    })
    
</script>

先是从data里面的数据msg通过绑定到input控件和p标签上。然后input上通过v-on:input监听控件，触发change()。

调用方法都可以默认获取e事件，e.target.value是获取调用该方法的DOM对象的value值。把value值在赋给data里的msg，就是实现了双向数据绑定的原理了。