v-model不过是语法糖

1.v-model介绍

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

2.用例剖析

//触发oninput事件 value



//触发onchanged事件 checked
 

//iview Checkbox 组件 基于 vuex 状态管理
倒序排列

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
    }
  },
  // ...
})

上述代码相当于：

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