一、v-model指令
1、双向数据流：
- 模型（Model）和视图（View）之间相互影响
- 通俗来讲，Vue的代码变了，HTML的代码也跟着变；HTML代码中v-model对应的值发生变化，Vue代码中的data的值也发生变化.
- v-model是双向数据流的代表
2、单向数据流：
- 模型（Model）影响了视图（View）的渲染
- 换句话说，Vue的数据的变化影响了HTML的渲染
- mustache表达式“{{}}”是单向数据流的代表
3、单向数据流举例
<div id="app">
<input :value="inputValue"/><!--做绑定，给inputValue赋值，这是一个单向数据流-->
</div>
<script>
var app = new Vue({//建立代码段，创建Vue对象
el:'#app',
data:{//声明数据
inputValue:'hello'
}
})
</script>
在以上这段代码中，input渲染出输入框中的值只能是hello，没法通过改变输入框中的值来改变模型中的data，如果这个时候使用{{inputValue}}，效果是一样的，都是单向数据流。一般，取变量的值都是单向数据流的概念。
4、双向数据流举例
<div id="app">
<input v-model="inputValue"/><!--如果变成v-model指令，既能得到inputValue的值，又能改变inputValue的 值-->
</div>
<script>
var app = new Vue({
el:'#app',
data:{
inputValue:'hello'
}
})
</script>
在以上这段代码中，如果输入框中的值改变改变，inputValue的值也跟着改变。数据影响页面，模型影响视图，视图影响模型。
<div id="app">
<select v-model="sltValue">
<option value="1">天津</option>
<option value="2">New York</option>
</select>
</div>
<script>
var app = new Vue({//建立代码段，创建Vue对象
el:'#app',
data:{//声明数据
inputValue:'hello',
sltValue:2
}
})
</script>
在以上这段代码中，sltValue的默认值是2，则选择框的值是New York。如果第二个option没有value,写作
<option>2</option>
那么这个选择框的值是这个option的文本2。value优先，但是没有value的话，它会去选择文本。当然这种写法是不规范的行为。很少select下不写value，去选择文本。
select的value值往往是文本存放在数据库的主键id，标准结果是select下的option有value值也有文本，这样才有开发的价值。
二、v-model指令所适用的表单域
用 v-model 指令在表单 input、 textarea及 select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
举例说明：
<div id="app">
<input v-model="inputValue"/><!--输入框-->
<textarea v-model="txt"></textarea><!--文本框-->
<input type="radio" v-model="picked" value="javascript" /> js<!--单选-->
<input type="checkbox" value="cked1" /><!--多选-->
<input type="checkbox" v-model="cked" value="java"/> java
<input type="checkbox" v-model="cked" value="c#"/> C#
<input type="checkbox" v-model="cked" value="php"/> PHP
</div>
var app = new Vue({
el:'#app',
data:{
inputValue:'hello',
txt:'txtArea',
picked:'js',//如果单选框的值不是js,则未被选中
cked1:false,
cked:['java','php']//此时已选的是java和php
}
})
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用 value属性和 input 事件；
- checkbox 和 radio 使用 checked属性和 change 事件；
- select 字段将 value作为 prop 并将 change 作为事件。
三、值绑定
1、如果radio的v-model 的值 和 ：value 一致，就呈现选中状态；否则，就是未选中
2、如果radio的状态是选中状态，v-model的值 和 value 的值一致
举例说明：
<div id="app">
<input type="radio" v-model="picked" :value="val"/>
{{picked}}
{{val}}
<div>
<script>
var app = new Vue({
el:'#app',
data:{
picked:true,
val:1,
}
})
</script>
下面这个例子中，复选框的初值是v-model中toggle的值，如果选中，toggle的值变成val1，如果未选中，则toggle的值变成val2。这个值的改变可以转换成状态的切换，比如隐藏显示、错误提示和成功提示等。
<div id="app">
<input type="checkbox" v-model="toggle"
:true-value="val1"
:false-value="val2"/>
<label>复选框</label>
<p>{{toggle}}</p>
<p>{{val1}}</p>
<p>{{val2}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
toggle:false,
val1:'val1',
val2:'val2'
}
})
</script>
四、修饰符
1、修饰符.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步.
举例说明：
<div id="app">
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'hello'
}
})
</script>
上面的例子，如果确定鼠标离开输入框失去焦点之后，确定已经输入完成才实现懒加载。
2、修饰符.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number修饰符。
举例说明：
<div id="app">
<input v-model.number="age" type="number">
</div>
<script>
var app = new Vue({
el:'#app',
data:{
age:12
}
})
</script>
这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。比如，如果age的值赋‘aa’字符串，则就返回‘aa’。
3、修饰符.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim修饰符
举例说明：
<div id="app">
<input v-model.trim="msg">
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:' hello '
}
})
</script>
上面这段代码给msg赋值有首尾空白字符，那么返回值就是’hello’。
