啥叫双向绑定?
v-model这个指令只能用在 <input> , <select> , <textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的.
举个例子吧
<div id="app">
<p>input 元素:</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob',
}
})
</script>
也就说v-model中的message 与dom节点中的message是同一个message。 都对应data里面对应的属性。
那么问题来了,啥叫单向绑定?
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
总结
什么双向绑定,简直是胡乱翻译嘛!误人子弟
two-way data bindings
就是一个data值对绑定了两个地方。叫个双绑定也比叫双向绑定好。
这个向从何体现(大概是谷歌翻译的。。)
典型的乱翻译还有 把normal flow翻译成文档流。
参考
VUE.JS学习笔记(v-model、Handling Forms) - 推酷
Vuejs——(1)入门(单向绑定、双向绑定、列表渲染、响应函数) - 大灰狼的小绵羊哥哥的博客 - CSDN博客