v-model理解

参考文章：https://www.cnblogs.com/cn-oldboy/p/12689186.html

v-model 是vue的一个语法糖，用于在表单控件或者在组件上创建双向绑定。双向绑定即修改model后界面view会自动更新，如果用户更新了view，model的数据也会自动更新。

1.原生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>

2.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>

3.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>