v-model 是 v-bind 以及 v-on 配合使用的语法糖，以下的两者的实现是一致的:
<input v-model="value" />
<input v-bind:value="value" v-on:input="value= $event.target.value" />
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。
其中 v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
text 和 textarea 元素使用 value property 和 input 事件
checkbox 和 radio 使用 checked property 和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件
forexample
<div id="app">
<base-checkbox v-model="lovingVue"></base-checkbox>
{{lovingVue}}
</div>
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
new Vue({
el:"#app",
data: {
lovingVue: ''
}
});
这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。
- 动态的绑定指令参数
可以动态的将指令参数传递给组件。假设你有一个组件 <my-button>，有时候你需要绑定一个点击事件 click，有时候需要绑定一个双击事件 dblclick，这个时候你可以这么写
<template>
...
<my-button @[someEvent]="handleSomeEvent()"/>
...
</template>
<script>
...
data(){
return{
...
someEvent: someCondition ? "click" : "dblclick"
}
},
methods:{
handleSomeEvent(){
// do something
}
}
...
</script>
