第四章:计算属性
为了避免过多的逻辑造成模板的臃肿不堪，可使用计算属性来简化逻辑。
1.什么是计算属性
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="example">
<input type="text" v-model="didi"/>
<input type="text" v-model="family"/>
<br/>
didi={{didi}},family={{family}},didiFamily={{didiFamily}}
</div> <script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#example",
data:{
didi:"didi",
family:"family"
},
computed:{
//一个计算属性的getter
didiFamily:{
get:function(){
//this 指向vm实例
return this.didi+this.family;
}
} }
})
</script>
</body>
</html>
当vm.didi和vm.family的值发生变化时，vm.didiFamily的值会自动更新，当然也会同步到DOM元素上。
2.计算属性的性能分析
第五章:表单控件绑定
1.v-model更新表单控件的基本例子
这些基本例子，直接使用value属性，绑定的都是字符串或者checkbox的布尔值。接下来分别介绍。
(1)文本框的使用
当用户操作文本框时，vm.name会自动更新为用户输入的值，同时span也会改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo">
<span>Welcom,{{name}}!join DDFE</span><br/>
<input type="text" v-model="name" placeholder="join DDFE"/>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#demo"
})
</script>
</body>
</html>
(2)复选框checkbox的使用
单个复选框的使用和文本框类似，多个复选框，也就是复选框组，被选入的值会放入一个数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框组</title>
</head>
<body>
<div id="demo">
<input type="checkbox" id="flash" value="flash" v-model="bizLines"/>
<label for="flash">快车</label><br/>
<input type="checkbox" id="premium" value="premium" v-model="bizLines"/>
<label for="premium">专车</label><br/>
<input type="checkbox" id="bus" value="bus" v-model="bizLines"/>
<label for="flash">巴士</label><br/>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#demo",
data:{
bizLines:[]
}
})
</script>
</body>
</html>
(3)单选按钮radio的使用
当单选按钮被选中时，v-model的变量值会被赋值为对应的value值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选按钮radio</title>
</head>
<body>
<div id="demo">
<input type="radio" id="flash" value="flash" v-model="bizLines"/>
<label for="flash">快车</label><br/>
<input type="radio" id="premium" value="premium" v-model="bizLines"/>
<label for="premium">专车</label><br/>
<input type="radio" id="bus" value="bus" v-model="bizLines"/>
<label for="flash">巴士</label><br/>
<span>Picked:{{bizLines}}</span>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#demo"
})
</script>
</body>
</html>
(4)select控件使用v-model分为两种情况。
一种是单选select控件，第二种是多选select控件。v-model指令都用于select标签。动态的生成option可以借助v-for指令等。
单选时vm.selected为对应的option的value值。多选会被放入一个数组中，多选是selectr有multiple属性，浏览器窗口想要多选可以借助ctrl和shift快捷键。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单的选择</title>
</head>
<body>
<div id="demo">
<select v-model="bizLine">
<option selected value="flash">快车</option>
<option value="premium">专车</option>
<option value="bus">巴士</option>
</select>
<span>selected:{{bizLine}}</span><br/>
<select v-model="bizLine2" multiple>
<option selected value="flash">快车</option>
<option value="premium">专车</option>
<option value="bus">巴士</option>
</select>
<span>selected:{{bizLine2|json}}</span>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#demo"
})
</script>
</body>
</html>
2.动态的值绑定
通过v-bind代替直接使用value属性，那么除了字符串，还可以是数值、对象、数组等非字符串的值。
(1)checkbox
3.v-model指令的修饰词及其源码分析
(1)lazy
默认情况下，v-model在input事件中同步输入框的值与数据，而添加了lazy特性后，在change事件中去掉同步性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo">
<span>Welcom,{{name}}!join DDFE</span><br/>
<input type="text" v-model="name" placeholder="join DDFE" />
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#demo"
})
</script>
</body>
</html>
同样是之前的代码，只是添加了lazy属性，那么name变量就不会同步了。
