5.v-model 指令详解。

1.v-model:

• 1-1.value：在表单控件或者组件上创建双向绑定。data流向页面，页面流向data。简写v-model，默认收集的就是value值。

• 1-2：限制在< input/>、< select/>、< textarea/>等表单元素及components中。

• 1-2.表单数据收集：

  • ①若：，则v-model收集的是 value 值，用户输入的就是 value 值。
  • ②若：，则v-model收集的是value值，且要给标签配置value值。
  • ③若：：
    • α：没有配置 input 的 value 属性，那么收集的就是 checked（勾选 or 未勾选，是布尔值）
    • β：配置input的value属性:
      v-model 的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）。
      v-model 的初始值是数组，那么收集的的就是value组成的数组。

2.v-model的三个修饰符：

• 2-1.lazy：失去焦点再收集数据。
• 2-2.number：输入字符串转为有效的数字。
• 2-3.trim：输入首尾空格过滤。

3.v-model只是一个语法糖：

<input :value="something"  @input="something = $event.target.value">

<===>

<input v-model="something">

4.model选项：

• 4-1.组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，自定义组件并没有默认的 value 和 input 事件，在使用时，我们需要显式的去声明定义 prop 的值和监听的事件。
• 4-2.写法：model选项代表的是监听传入的数据和监听传出的事件。

model: {
  prop: 'modelValue', // 对应 :value = "modelValue" 的名字
  event: 'change' // 对应的是 this.$emit('change', val)的事件名字
},
props: {
  modelValue: {
    type: String,
    default: ''
  }
}
updateVal(val) {
  this.$emit("change", val);
},