v-model(双向绑定)底层原理实现

当在输入框输入值的时候，h2标签内会出现输出框所出现的值，v-model的过程是怎么实现的呢，下面请看源码展示

<div id="app" v-cloak>
              <input type="text" v-model="message">
              <h2>{{message}}</h2>
            </div>
            <script>
                var app = new Vue({
                    el:'#app',
                    data:{
                       message:''
                    }
                })
            </script>

原理事利用了 input的事件，实时监测输入框的值，得到inp框的值赋值给message，然后把message的值给inp的value属性

  <div id="app" v-cloak >
                           <input type="text" :value="this.message" @input="hs">
                           <h2>{{message}}</h2>
                    </div>
                    <script>
                        var app = new Vue({
                            el:'#app',
                            data:{
                            message:'hello'
                            },
                            methods: {
                                hs(ev){
                                    this.message=ev.target.value
                                }
                            }
                        })
                    </script>