Vue开发收集（v-model）

在使用Vue框架进行前端开发的过程中，v-model经常被使用到,该指令的作用有以下的两点：

• 1.在input,textarea,select等上创建双向绑定：

<input v-model="msg"/>
<textarea v-model="textMsg"></textarea>
<select v-model="optionValue">
    <option value="hello">hello</option>
</select>复制代码

• 2.作为语法糖，探究其实质：

<input v-model="msg"/> => <input v-bind="msg" v-on:change="msg  = $event.target.value" />复制代码

这样其实质就是使用了input等输入框的change,input等事件进行的处理，我们由此推出当v-model使用在组件上:

<list v-model="msg"></list>
复制代码

list组件中代码：

<template>  
    <div id="list">     
     <button @click="$emit('input','from child')">自定义事件</button>  
    </div>
</template>复制代码

当点击button 时候将会emit到list组件的v-model语法糖，并传递一个参数"from child",然后v-model上的值msg将会被赋值成为"from child"

使用修饰符

.lazy

在默认情况下，v-model会在每次input时候就会更新数据，加上v-model.lazy后只会在触发change事件

.number

使用该修饰符后会将输入的值转化为数值类型，通常还是很有用的，因为即便是在input type="number"的情况下返回的依旧还是string

.trim

该修饰符处理空格，去掉首位的空白字符