- 基本用法：v-model双向绑定
- 单选按钮Radio
- 复选框Checkbox
- 选择列表Select-Option
- option动态输出
- 单选的时候绑定数据对象
- 修饰符
v-model双向绑定
双向绑定以后，表单显示的值只依赖于绑定的数据，不再使用初始化的value属性，在textarea标签之间插入的值也不生效。
v-model其实是一个语法糖，也可以用@input方法来改写。实际上是自动监听input事件。
使用v-model的例子：
<div id="model">
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
<script>
var app2 = new Vue({
el: "#model",
data: {
message: ""
}
})
</script>
还原成监听input时间的例子：
<div id="app">
<input type="text" @input="handleInput" placeholder="输入...">
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: ""
},
methods: {
handleInput: function (e) {
this.message = e.target.value;
}
}
});
</script>
单选按钮Radio
单独使用单选按钮，只需要使用其checked属性，绑定一个Vue实例的布尔值属性即可表示选中与否。只需要更改Vue实例的布尔值属性，就可以改变选中的状态。
<div id="app2">
<label>男性
<input type="radio" :checked="check">
</label>
</div>
<script>
var app2 = new Vue({
el: "#app2",
data: {
check: true
}
})
</script>
使用多个单选按钮，主要是为了获得被选中的项目的name和value，一般也可能是动态生成的按钮。如果是依赖HTML，则radio控件的name必须相同。
有了Vue之后，无需设置name，只需要把一批按钮都通过v-model绑定给一个属性即可。实际上，只要绑定了同一个属性，即使name不同也没事，所以一般就不设置name属性了。
<div id="app3">
<label>A<input type="radio" v-model="alpha" value="A"></label>
<label>B<input type="radio" v-model="alpha" value="B"></label>
<label>C<input type="radio" v-model="alpha" value="C"></label>
<p>被选中的Radio的Value是：{{alpha}}</p>
</div>
<script>
var app3 = new Vue({
el:"#app3",
data:{
alpha: ""
}
})
</script>
复选框Checkbox
Checkbox单独使用的时候也是直接绑定v-model和checked属性即可。绑定布尔值也可以，但是做不到双向绑定，只能通过Vue实例去控制，所以v-model略好。
<div id="app4">
<label>A <input type="checkbox" value="3" :checked="checked"></label>
<p>选择状态： {{checked}}</p>
</div>
<script>
var app4 = new Vue({
el:"#app4",
data:{
checked: false
}
})
</script>
多个复选框的时候，略有变化，单选框是选一个值，而复选框是一系列value属性。
所以这里Vue要绑定的属性是一个数组，与单选框类似，无需设置name，将所有需要复选的内容用v-model绑定到一个Vue实例上即可。
<div id="app5">
<label>A <input type="checkbox" value="A" v-model="content"></label>
<label>B <input type="checkbox" value="B" v-model="content"></label>
<label>C <input type="checkbox" value="C" v-model="content"></label>
<label>D <input type="checkbox" value="D" v-model="content"></label>
<label>E <input type="checkbox" value="E" v-model="content"></label>
<p>选中的是 {{result}}</p>
</div>
<script>
var app5 = new Vue({
el: "#app5",
data:{
content:[]
},
computed:{
result: function () {
if (this.content.length === 0) {
return "";
} else {
return this.content;
}
}
}
})
</script>
无论是勾选，还是直接将一个对应value的字符串值加入进实例的绑定属性，都可以同步修改复选框的被选中状态。
Select-Option
使用v-model的话，需要绑定在select标签上，而不是option标签上，绑定之后，如果option标签有value属性，则会匹配value属性，否则会匹配option标签的实际内容。
<div id="app6">
<select v-model="select">
<option value="A">AA</option>
<option value="B">BB</option>
<option value="C">CC</option>
<option value="D">DD</option>
</select>
<p>选中的项目是 {{select}}</p>
</div>
<script>
var app6 = new Vue({
el: "#app6",
data: {
select:"A"
}
})
</script>
如果是复选的情况下，给select标签添加multiple属性即可。此时v-model绑定的值变成了数组，所以要给一个空数组。
<div id="app7">
<select v-model="select" multiple>
<option value="A">AA</option>
<option value="B">BB</option>
<option value="C">CC</option>
<option value="D">DD</option>
</select>
<p>选中的项目是 {{select}}</p>
</div>
<script>
var app7 = new Vue({
el: "#app7",
data: {
select:["A"]
}
});
</script>
option动态输出
实际业务中option经常是动态输出的，此时需要绑定value和实际内容。
<div id="app8">
<select v-model="select">
<option v-for="opt in options" :value="opt.value">{{opt.text}}</option>
</select>
<p>选中的项目是 {{select}}</p>
</div>
<script>
var app8 = new Vue({
el: "#app8",
data: {
select: "AA",
options: [
{
text: "A",
value: "AA"
},
{
text: "B",
value: "BB"
},
{
text: "C",
value: "CC"
},
{
text: "D",
value: "DD"
},
]
}
});
</script>
下拉菜单组件一般很少使用，因为样式差异比较大，一般还是用单选和复选框多一些。在之后还可以做一个可以复用的组件。
单选的时候绑定数据对象
在实际开发的时候，有时候单选框并不是为了提交数据，而是需要绑定一个特殊的值。如果使用v-model，只能绑定一个字符串或者布尔值。
使用v-bind就可以绑定一个对象。
单选框可以同时绑value和v-model，这样v-model可以取到value的内容。而value可以是一个数据对象。
<div id="app9">
<label>按钮<input type="radio" v-model="picked" :value="value"></label>
<p>{{picked.name}}</p>
<p>{{value}}</p>
</div>
<script>
var app9 = new Vue({
el:"#app9",
data:{
picked:true,
value: {
name:"jenny"
}
}
})
</script>
这个例子里如果选中，则会显示出value绑定的对象的name属性。
复选框可以添加两个特别的true-value和false-value，选中和不选中的时候控制值。
<div id="app10">
<input type="checkbox"
v-model="toggle"
:true-value="value1"
:false-value="value2">
<p>{{toggle}}</p>
<p>{{value1}}</p>
<p>{{value2}}</p>
</div>
<script>
var app10 = new Vue({
el:"#app10",
data:{
toggle:false,
value1: {
name:"jenny"
},
value2:{
name:"cony"
}
}
})
</script>
说实在在复选框使用这个功能用处不大。倒是v-bind可以绑定一个数据对象，是可以方便很多操作。
如果此时查看元素，可以看到：
<input type="checkbox" true-value="[object Object]" false-value="[object Object]">
这样就不能直接提交表单，必须自己处理过之后才能提交表单。
修饰符
与事件类似，v-model也有修饰符可以使用。
.lazy，表示v-model不会在input事件中监听，而是监听change事件，而是会在失去焦点或者按回车的时候才更新。
.number，正常情况下通过HTML得到的值全部是字符串，设置了这个，可以把输入转换成数字。如果输入中含有字符，会自动转换成能够parse出数值的内容。
.trim，可以自动过滤首尾的空格。
接下来，就是要学习使用Webpack前端工程化开发，和使用Vue的组件了。
