双向数据绑定
一般双向数据绑定存在于input / select / textarea，因为它既要有输入数据的地方，也要有输出数据的地方。现在我们希望在input里输入姓名，在span里可以即时的显示我们输入的内容，我们就需要拿到input的value值，这时我们要用到ref：
<h1>数据双向绑定 input / select / textarea</h1>
<div id="vue-app">
<label>姓名:</label>
<input ref="name" type="text" v-on:keyup="logName">
<span>{{ name }}</span>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#vue-app",
data: {
name: ""
},
methods: {
logName: function(){
this.name = this.$refs.name.value;
}
}
})
</script>
TIM图片20180125122227.png
现在就可以即时的获取input中的值。其实在vue中有一个指令同样可做到，并且更加简单，就是v-model
<h1>数据双向绑定 input / select / textarea</h1>
<div id="vue-app">
<label>年龄:</label>
<input type="text" v-model="age">
<span>{{ age }}</span>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#vue-app",
data: {
age: ""
}
})
</script>
TIM图片20180125124158.png
计算属性
如果我们想计算简单的加法，完全可以写一个方法
<h1>Computed 计算属性</h1>
<div id="vue-app">
<button v-on:click="a++">add a</button>
<button v-on:click="b++">add b</button>
<p>a - {{ a }}</p>
<p>b - {{ b }}</p>
<p>20 + {{ a }} = {{ addToA() }}</p>
<p>20 + {{ b }} = {{ addToB() }}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#vue-app",
data: {
a: 0,
b: 0
},
methods: {
addToA: function(){
console.log ("aaaa");
return this.a + 20;
},
addToB: function(){
console.log ("bbbb");
return this.b + 20;
}
}
})
</script>
打开控制台，我们点击一下按钮看看会发生什么
TIM图片20180125130821.png
会发现我们只点击了一下add b，但是两个方法都被执行了，这样的话很耗费性能。如果我们使用computed属性会不会这样呢？我们来试一下
<h1>Computed 计算属性</h1>
<div id="vue-app">
<button v-on:click="a++">add a</button>
<button v-on:click="b++">add b</button>
<p>a - {{ a }}</p>
<p>b - {{ b }}</p>
<p>20 + {{ a }} = {{ addToA }}</p>
<p>20 + {{ b }} = {{ addToB }}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#vue-app",
data: {
a: 0,
b: 0
},
computed: {
addToA: function(){
console.log ("aaaa");
return this.a + 20;
},
addToB: function(){
console.log ("bbbb");
return this.b + 20;
}
}
})
</script>
TIM图片20180125132306.png
此时点击一下add a就只会执行addToA，需要注意的是，既然computed是属性，那么在调用时就不需要写（）。
动态css class
绑定class，我们需要用到v-bind
<div id="vue-app">
<div v-bind:class="{red:true}">示例1</div>
</div>
TIM图片20180125154513.jpg
这时候div就有了class，也可以绑定多个class，但是这并不是动态的，接下来，我们看看如何动态的绑定class
<style>
span {
background: rgb(216, 101, 35);
color: #fff;
display: inline-block;
padding: 20px;
margin: 20px 0;
}
.changeColor span {
background: teal;
}
</style>
<div id="vue-app">
<button v-on:click="changeColor=!changeColor">chengeColor</button>
<div v-bind:class="compClass">
<span>Mary</span>
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#vue-app',
data: {
changeColor: false
},
computed: {
compClass:function(){
return {
changeColor : this.changeColor
}
}
}
});
</script>
TIM图片20180125161205.jpg
TIM图片20180125161152.jpg
在这个例子中，我们每点击一下changeColor按钮，div的class都会发生相应的变化。
