关于input标签中v-model的理解

2021/04/09，太阳辣么大，我却辣么冷 。好久没水了，水一帖
有些同学可能在刚接触v-model的时候对他还是无法理解，那么接下来我们一步一步来去研究一下。
在这里插入代码片
当我们想做到上面的效果时，如果用js可以这么写：

<div id="app">
    <input type="text" value="" oninput="change()">
    <h1></h1>
</div>
<script>
    var input = document.getElementById("app")
    function change() {
        input.children[1].innerHTML = input.children[0].value
    }
</script>

或是引用jq：

<div id="app">
    <input type="text" value="" oninput="change()">
    <h1></h1>
</div>
<script src="../jquery.min.js"></script>
<script>
    function change() {
        $('#app h1')[0].innerHTML = $('#app input')[0].value
    }
</script>

但是看v-model却“苗条”了很多：

<div id="app">
    <input type="text" v-model="txt">
    <h1>{{txt}}</h1>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: { txt: '' }
    })
</script>

那我们到到底怎么去理解v-model。
其实v-model的本质上是一个语法糖，而我们的<input type="text" v-model="txt">又怎么去理解呢，我们用vue的写法把他拆开可以得到以下代码：

<div id="app">
    <input type="text" :value="txt" @input="change">
    <h1>{{txt}}</h1>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: { txt: '' },
        methods: {
            change(e){
                this.txt= e.target.value                 
            }
        },
    })
</script>

由此可见，<input type="text" v-model="txt">本质上是<input type="text" :value="txt" @input="change">。
:value="txt"将监听事件中的数据放入input的value属性中让其显示，而我们需要每次输入都改变实时更新，所以我们需要用@input对input输入框进行监听，而change方法因为没有传值所以不管写什么获取到的都会是事件对象，这里我还是写了e，然后拿到监听到的value值赋值给txt。
最后就是h1的插值表达式会重新渲染。

搞定，散会。