v-model雙向綁定原理

<div id="app">
            <div>{{msg}}</div>
            <!-- 寫法1 -->
            <input type="text" v-bind:value="msg" v-on:input="handle">
            <!-- 寫法2 -->
            <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
            <!-- 寫法3 -->
            <input type="text" v-model="msg">
        </div>
        <script src="./vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    msg:'Hello Vue!'
                },
                methods: {
                    handle:function(event){
                        // 使用輸入域中最新的數據來覆蓋原來的數據
                        this.msg = event.target.value;
                    }
                }
            });
        </script>

可以看到v-model實際上等同於 通過動態綁定value為msg  然后綁定input事件,把當前input標簽的value值賦值給msg實現的