【Vue】v-model

v-model是一个用于表单数据的双向绑定（input和textarea经常使用到v-model），其实相当于两个指令：

1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件

1. Vue中经常v-model实现数据的双向绑定，它会根据控件的类型自动选取正确的方法来更新元素。

2. v-model实际上是一个语法糖，比如

<input v-model="test">本质上是<input :value="test" @input="test=$event.target.value">，
其中@input是对input事件的一个监听，:value="test"是将监听事件中的数据放到input中。

3. v-model不仅可以赋值给input，还可以获取input的数据。而且是实时的。

比如：

<div id="app">
  <input v-model="test">
  <!--input的内容变化会同时让p的内容变化-->
  <p>{{test}}</p>
</div>  

let vm = new Vue({
  el:"#app",
  data:{
    test:"这是一个测试"
  }
})

4. v-model在下拉框、单选按钮和复选按钮中的应用

value值是传值的关键

• 下拉框

 <div id="app">
    <select name="fruit" v-model="selected">
      <option value="选中A">A</option>
      <option value="选中B">B</option>
      <option value="选中C">C</option>

    </select>
    <p>{{selected}}</p>
  </div>

let vm = new Vue({
  el:"#app",
  data:{
    selected:"未选择"
  }
})

效果： v-model之下拉框

• 单选按钮

  <div id="app">
 <!--value的作用是点击选中的时候，将value的值通过v-model传给picked-->
    <label><input type="radio"  v-model="picked" name="size" value="small_picked">small</label>
    <label><input type="radio" v-model="picked" name="size" value="big_picked">big</label>
    <p>{{picked}}</p>
  </div>

let vm = new Vue({
  el:"#app",
  data:{
    picked:"未选择"
  }
})

效果： v-model之单选框

• 复选按钮（"checked"一定要数组，不能是字符串）

  <div id="app">
    <label><input type="checkbox" v-model="checked" value="one_check">选项1</label>
    <label><input type="checkbox" v-model="checked" value="two_check">选项2</label>
    <label><input type="checkbox" v-model="checked" value="three_check">选项3</label>
    <p>{{checked}}</p>
  </div>

let vm = new Vue({
  el:"#app",
  data:{
    checked:[] //复选按钮要用数组，不能用字符串
  }
})

效果： v-model之复选框

5. v-model修饰符

v-model可以和.lazy .trim .number等这些修饰符一起使用。

• .lazy（延迟加载）
  在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步，只有当焦点移除input的时候，才会同步数据。

<input v-model.lazy = "msg">

• .trim
  去除字符串的首尾空格

<input v-model.trim = "msg">

• .nember
  将数据转化为值类型

<input type="number" v-model.number="age">

6. 自定义组件使用v-model的操作

1. 接收一个value prop
2. 触发input事件，并传入新的值
   在原生表单元素中
   <input v-model="inputValue">
   相当于
   <input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">
   在自定义组件中
   <my-component v-model="inputValue"></my-component>
   相当于
   <my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>
   这时inputValue接受的值就是input事件回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还要使用$emit去触发input的事件。
   this.$emit('input', value)