v-model

今天在做项目的时候发现有一个语法糖v-model,我们尝试着用来简化我们的代码

v-model是一个指令，限制在<input>、<select>、<textarea>、components中使用，修饰符.lazy(取代 input 监听 change 事件)、.number(输入字符串转为有效的数字)、.trim(输入首尾空格过滤)。接下来我们就来分析 v-model 的实现原理。我们知道Vue的核心特性之一是双向绑定，vue的响应式原理是实现了数据－>视图，接下来我们要学习 视图－>数据的原理。
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，比如我项目中出现的这个

  <input type="text" :value="x"
                   @input="x=$event.target.value"
                   placeholder="在这里输入备注">

ts

<script lang='ts'>
  import {Component} from 'vue-property-decorator';
  import Vue from 'vue';

  @Component
  export default class Notes extends Vue {
    x = '';
    value=''
  }
</script>

可以简写成

 <label class="notes">
            <span class="name">备注</span>
            <input type="text" v-model="x"
                   placeholder="在这里输入备注">

ts

<script lang='ts'>
  import {Component} from 'vue-property-decorator';
  import Vue from 'vue';

  @Component
  export default class Notes extends Vue {
    x = '';
  }
</script>

少了巨多，这里就是利用v-model自动利用名为 value的 prop 和名为 input的事件，使得当Notes触发一个$event.target.value 事件并附带一个新的值的时候，视图里的input的值会改变，而且这个x的属性将会被更新。

v-model的好处还不止于此，像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：举个简单的例子，这是vue文档的例子

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

现在在这个组件上使用 v-model 的时候：

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。