解析v-model

<input v-model="sth" /> 等同于下面的语法
<input :value="sth" @input="sth = $event.target.value" />

这段代码含义如下：input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，把最新的value传递给 sth。

在一个组件中，v-model默认使用value作为prop，以及默认使用input作为监听事件。

v-model的不足：

在创建checkbox和radio的常见组件时，v-model就不好用了。解决方案如下：

<input type="checkbox"  @change="$emit('input', $event.target.checked)" :checked="value"/>

在 Vue 2.2 版本，你可以在定义组件时通过 model 选项的方式来定制 prop/event：

//在这个组件中使用 v-model
<base-checkbox v-model="lovingVue"></base-checkbox>

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)"
    >
  `
})

lovingVue 的值就会传递给 checked prop。当 <base-checkbox> 内部触发一个 change 事件，并且传递一个新值，lovingVue 属性就会进行更新。

注意，仍然需要在组件 props 选项中声明 checked prop 属性。