v-model 简单理解

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

v-model 只是语法糖而已

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

注意: 对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。

1. 作用在表单元素上, 普通标签上

动态绑定了 input 的 value 指向了 messgae 变量，并且在触发 input 事件的时候去动态把 message设置为目标值：

 <input v-model="sth" />
 //  等同于
 <input 
     v-bind:value="sth" 
     v-on:input="sth=$event.target.value"
 >
 //$event 指代当前触发的事件对象;
 //$event.target 指代当前触发的事件对象的dom;
 //$event.target.value 就是当前dom的value值;
 //在@