v-model 底层原理实现

v-model 底层原理实现

v-model本质就是用v-bind去绑定值再通过input事件处理值的变化

<div>
    <p style="border-bottom: 1px solid coral;padding: 10px;"> {{msg}}</p>
    <input type="text" v-model="msg">
    <!-- 此时这两句是等同的 -->
    <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
	<!-- $event 指代当前触发的事件对象;
	$event.target 指代当前触发的事件对象的dom;
	$event.target.value 就是当前dom的value值;
	在v-on:input方法中，value => sth;
	在v-bind:value中,sth => value; -->
</div>

new Vue({
	data: {
    	msg: ''
    }
})