利用v-model，来学习v-bind和v-on，同时学习原生的js和input输入的相关函数

vue中的v-model

首先要记得，这个写法，不是modle，不是module。记得，有五个单词。
其次，所谓的指令，应该算是扩充了HTML元素的属性。本质上，是一种元素属性。

目标是响应式输入和输出

方法一：原生JS的实现方式

<h4 id="h4"></h4>
    <input type="text" id="input" oninput="fun()">
    <script>
        function fun() {
            var content = document.getElementById('input').value;
            document.getElementById('h4').innerHTML = content;
        }
    </script>

方法二：vue中的原生写法

<div id="test">
        <h4>{{ val }}</h4>
        <input type="text" :value='val' @input="fun">
    </div>
    <script>
        const vm = new Vue({
            el: "#test",
            data: {
                val: 'k',
            },
            methods: {
                fun(e) {
                    this.val = e.target.value;
                }
            }
        })
    </script>

方法三：vue中的简写方式 v-model

<div id="test">
    <h4>{{ val }}</h4>
    <input type="text" v-model='val'>
</div>
<script>
    const vm = new Vue({
        el: "#test",
        data: {
            val: '',
        },
    })
</script>