Vue中的数据绑定
什么是数据绑定？
数据绑定是指将数据模型与视图进行关联，实现数据的自动更新，例如<a></a>标签的href属性用v-bind指令绑定到了一个data，当修改data属性对应的值时，href属性也会自动更新。
单向数据绑定
单向数据绑定即一个元素的属性值只能够从data中取出数据，但不能修改data中的值。
单向绑定使用v-bind指令。
双向数据绑定
双向数据绑定即当页面上该元素的属性值被修改后，相应的data属性对应的值也会被修改。
双向数据绑定v-model指令只能用在表单类（输入类）的元素上，该标签一般要有value属性才能实现双向数据绑定。换而言之，要实现与用户交互的标签，一般都要用到v-model指令。
下面引入一段代码看看他们的区别：
<body>
<div id="app">
单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="name">
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
name:'kunkun'
}
})
</script>
运行上面的代码，在第一个input框中输入ikun，打开控制台，打开Vue开发者工具vue-devtools（没有开发者工具的点这里进行安装），如下图，我们发现name值没有被修改掉。
而当我们修改第二个输入框中的值时，如下图，我们会发现name值相应的也变成了ikun。当我们修改第二个输入框的内容时，第一个输入框的内容也会随之而改变，这是因为两个输入框绑定了同一个name。
Tips
v-model:value可以简写为v-model，因为该指令默认用来收集的就是value属性值。那么<input type="text" v-model:value="name">就可以改为
<input type="text" v-model="name">v-bind可以直接省略，那么<input type="text" v-bind:value="name">就可以改为
<input type="text" :value="name">在以后的开发中这两条指令经常用简写形式。
这就是Vue中的双向数据绑定和单向数据绑定。你学废了吗？
