v-model（数据双向绑定）的实现方式

1.

<input v-bind(动态绑定一个value属性):value='msg' v-on:(给当前元素绑定input事件)"input='handle'>  handle(event){
    this.msg=event.target.value
}

2.

<input v-bind(动态绑定一个value属性):value='msg' v-on(给当前元素绑定input事件):input='msg=$event.target.value' >

(1)$event 指代当前触发的事件对象;

(2)$event.target 指代当前触发的事件对象的dom;

(3)$event.target.value 就是当前dom的value值;

3.直接 v-model="msg" v-model是一个语法糖,可以简单快捷写出

4.

<input v-blod:value="msg" v-on:input="$emit(通过emit事件传值)( 'input ', $event.target.value)"> 

5.

<div id="app">
        <input type="text" id="a">
        <span id="b">{{msg}}</span>
    </div>
    <script>
        var obj = {}//先定义一个空对象
        var val = 'dageda'//先定义一个val,定义一个初始值
        Object.defineProperty(obj, 'val', {
            get: function () {//get方法5.
                return val
            },
            set: function (newVal) {//set方法
                val = newVal
                document.getElementById('a').value = val
                document.getElementById('b').innerHTML = val
            }
        })
        document.addEventListener('keyup', function (e) {//监听键盘按键抬起事件
            obj.val = e.target.value
        })
    </script>