Vue中v-bind与v-model指令

1. v-bind：单向绑定

1.1作用：
使视图层可以使用逻辑层data的数据，从而达到动态改变视图层的效果。
简单来说就是由data中的数据决定视图层的效果。
1.2用法：
在html属性或样式（行内）前加上 v-bind：或：
1.3注意
v-bind只可以单向的由数据来决定视图，无法反其道而行。
数据 -> 视图 ；√
视图 -> 数据 ；×

2. v-model : 双向绑定

2.1作用
v-model实现了双向绑定，视图与数据相互作用。
2.2用法
在html属性或样式（行内）前加上 v-model：

v-model 是由 v-bind 与 v-on 结合才得以实现。如下：

<input v-bind:value = "msg" v-on:input="msg = $event.target.value" />
//上面也等于下面
<input v-model:value = "msg" />

3. v-model 事件修饰符

1.  .number // 将v-model 得值 转为 number 类型 
2.  .trim   // 去除空隔
3.  .lazy   // 失焦时才改变 data 数值