数据绑定
将model和view绑定起来。例如value="name",data中的name值发生变化,输入框中的值也会发生变化。
单向数据绑定与双向数据绑定
vue中有2种数据绑定的方式:
- 单向数据绑定(v-bind):数据只能从data流向页面;
- 双向数据绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data;
备注:
- 双向数据绑定一般都应用在表单类(输入类)元素上 (如:input、select等,有value属性的);
- v-model:value 可以简写为 v-model,因为v-model默认收集的就是value的值;
单向数据绑定:就是把Model
绑定到View
,当我们用JavaScript
代码更新Model
时,View
就会自动更新双向绑定就很容易联想到了;
双向数据绑定:在单向绑定的基础上,用户更新了View
,Model
的数据也自动被更新了
代码示例
<body>
<div id="root">
单向数据绑定:<input type="text" v-bind:value="name"><br/>
双向数据绑定:<input type="text" v-model:value="name"><br/>
<hr/>
<h2>简写</h2>
<!-- 简写 -->
单向数据绑定:<input type="text" :value="name"><br/>
双向数据绑定:<input type="text" v-model="name"><br/>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
name:'百度'
}
})
</script>
</body>
如上代码段中,若对双向绑定的输入框修改数据,单向绑定的输入框也会改变,所有输入框显示内容都一样。
双向数据绑定的输入框中内容改变,导致data中name值改变,name值的改变导致单向绑定输入框的显示内容改变,一个连锁反应。