v-model不过是语法糖

1.v-model介绍

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数 据绑定。v-model实际上是语法糖，是一种简便写法。

2.用例剖析

//触发oninput事件 value
<input v-model="username"  />
<input :value="username" @input="username=$event.target.value" />

//触发onchanged事件 checked
<input type=checkbox :checked="signal" @change="signal=$event.target.checked" /> 

//iview Checkbox 组件 基于 vuex 状态管理
<Checkbox v-model="!$store.state.sortAsc" @on-change="sortChange($event.target.checked)">倒序排列</Checkbox>

methods:{
    noteSortChange (checked) {
        this.$store.commit('vSortDesc', checked)
    }
}

const mutations = {
  vSortDesc: (state, payload) => {
    state.sortAsc = payload
  }
}

3.官方案例

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

原文引自 https://cn.vuejs.org/v2/api/

Example:
Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上述代码相当于：
<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

注:总结常规的使用及说明，后续会不断更新，如有疑问见解多多交流