v-model的使用

v-model可以实现双向数据绑定
v-model即可以作用于表单元素，又可以作用于自定义组件，无论是哪种情况，它都是一个语法糖，最终会生成一个属性和一个事件

在表单中使用

会根据作用的表单元素类型而生成合适的属性和事件
例如作用于普通文本框会生成value属性和input事件
作用于单选框或者多选框时，会生成checked属性和change事件

<input type="text" v-model="msg" />
<!-- 等效于 -->
<input type="text" :value="msg" 
	@input="msg=$event.target.value" />
<p>{{ msg }}</p>

v-model的本质是一个语法糖
input元素本身有个oninput事件，这个是HTML5新增的，类似于onchange，每当输入框内容变化的时候，就会触发oninput，把最新的value传给msg
所以可以得出一个结论，在给<input />元素添加v-model属性时，默认会把value作为元素的属性，然后把"input"事件作为实时传递value的触发事件

在组件中使用v-model

组件中的v-model生效原则
接收一个value属性
在有新的value上触发input事件
父组件在子组件上使用v-model，默认会用value的prop来接收父组件v-model绑定的值，
然后子组件通过input事件将更新后的值传递给父组件
父组件

<template>
	<child v-model="number"></child>
</template>

<script>
export default {
	data(){
		return{
			number:100,
		}
	}
};
</script>

子组件

<template>
	<input type="text" :value="value" @input="$emit("input",$event.target.value)">
</template>

<script>
export default {
  data() {
    return {
      props:["value"]
    };
  },
};
</script>

v-model修饰符

.lazy

在一些特殊的需求和场景下，你可能希望数据同步不是实时同步而是在触发 change 事件的时候进行数据同步，那么你可以添加 lazy 修饰符进行处理，使用的示例如下：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number

在表单中处理输入验证必须是数字时，希望可以将用户输入的值自动转换成数字类型，那你可以在 v-model 上加上 number 修饰符进行处理。

<!-- 将输入的值自动转换成数字类型 -->
<input v-model.number="age" type="number">

.trim

对于用户在表单标签中输入的字符串，想去除首尾的空白字符，就可以用 trim 修饰符。

<!-- 去除输入值的首尾空白字符 -->
<input v-model.trim="msg">