单项数据绑定用“v-bind”指令，数据只能从Vue实例的data属性流向页面，当data属性值发生变化，页面中对应的值也会随之变化，但页面中的值变化，不会对data属性值产生影响。
模板容器和Vue实例
<body>
<div id="root">
<input type="text" v-bind:value="name">
<span>{{name}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'百度'
}
})
</script>
修改input框内的值，Vue实例data中的name不会发生变化，因此span标签内的值也不会发生变化
<body>
<div id="root">
<input type="text" :value="name">
<span>{{name}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'百度'
}
})
</script>
双向数据绑定用“v-model”指令，数据不仅能从Vue实例的data属性流向页面，还可以从页面流向data属性，当data属性值发生变化，页面中对应的值也会随之变化，反之页面中的值变化，对应的data属性值也会随之变化。
模板容器和Vue实例
<body>
<div id="root">
<input type="text" v-model:value="name">
<span>{{name}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'百度'
}
})
</script>
修改input框内的值，Vue实例data中的name值也会随之发生变化，从而引起span标签内的值发生变化
<body>
<div id="root">
<input type="text" v-model="name">
<span>{{name}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'百度'
}
})
</script>
注：双向绑定一般都应用在表单类元素上，如input、select等。
,
