vue中input中v-model语法糖原理

v-model是双向数据绑定，其本质是一个语法糖，我们怎么理解v-model在中的运行原理呢？我们将代码进行拆分分析一下：

<div id="app">
        <input type="text" :value="text" @input="change">
        <h1>{
    
    {
    
    text}}</h1>
        //这里我们给input本身自带有的value属性进行动态绑定:value="text"，
        //在给input添加一个事件，当input中发生了变化便进行触发@input="change"
    </div>
    <!-- 引入vue，基于vue的语法，渲染页面内容 -->
    <script src="./vue.js"></script>
    <script>
        new Vue({
    
    
            el: '#app',
            data() {
    
    
                return {
    
    
                    text: '',//这里用于保存input标签内发生变化的值
                }
            },
            methods: {
    
    
                change(e){
    
    
                //把变化的值存放在text变量中就实现了变化
                    this.text=e.target.value;
                },
            },
        })
    </script>

上面的代码运行后你就会发现，在输入框内输入的值，会同步显示在h1标签里面
这就是v-mode在input中做了什么事情，如何实现的数据的双向绑定。