VueVue中单向绑定与双向绑定的理解与使用
Posted The Gao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VueVue中单向绑定与双向绑定的理解与使用相关的知识，希望对你有一定的参考价值。
概述
Vue.js 最显著的特点就是响应式和数据驱动，也就是将Model和View进行单向绑定或者双向绑定。
单向绑定
把Model绑定到View，当更新Model时View就会自动更新。因此，我们不需要再通过原声javascript代码进行额外的DOM操作。
双向绑定
把Model绑定到View的同时，也将View绑定到Model上。这样，当更新Model时，View就会自动更新；反之，如果用户更新了View，Model的数据也自动被更新了。
Vue中的应用
插值
插值形式就是data的形式，它使用的是单向绑定。
我们首先定义好一个JavaScript对象作为Model，并且把这个Model的两个属性绑定到DOM节点上。
<body>
<div id="vm">
<p>Hello, name!</p>
<p>You are age years old!</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue(
el: '#vm',
data:
name: 'Bob',
age: 18
);
</script>
此时在控制台输入vm.name = 'Tom'，可以观察到页面自动地、实时地发生了变化，原来的"Hello, Bob!"自动变成了"Hello, Tom!"。
v-bind
如果我们希望某些节点能够支持单向绑定，我们只需要在该属性前面加上v-bind:指令，这样Vue在解析的时候会识别出该指令，就会将该将其属性的值跟Vue实例的Model进行绑定。如<p class="classed">，这里<p>节点的class样式指定的值为classed，它是一个静态的属性值，通过<p v-bind:class="classed">绑定之后，classed不再是一个静态的字符串，而是vue实例中的data.classed变量，我们可以通过操作Model的classed来实现对View的class属性的动态更新，从而实现View的动态更新。
<body>
<div id="vm">
<p v-bind:class="classed">Hello, name!</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue(
el: '#vm',
data:
name: 'Bob',
classed: 'red'
);
</script>
<style>
.red background: red;
.blue background: blue;
</style>
如上面代码所示，vm.classed的初始值为red，此时<p>的样式属性对应的是.red，此时背景就为红色，我们可以通过在浏览器的控制台输入vm.classed='blue'，此时背景就自动变成了蓝色。
可以看到通过对class属性进行绑定我们就可以动态的改变class对应的样式，这个都是通过Model的操作完成的，没有设置任何的DOM操作。
v-model
v-model主要是用在表单元素中，实现了双向绑定。
当用户填写表单时，View的状态就被更新了，如果此时Model的数据也会随着输入的数据动态的更新，那就相当于我们把Model和View做了双向绑定。
<body>
<form id="vm" action="#">
<p><input v-model="email"></p>
<p><input v-model="name"></p>
</form>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue(
el: '#vm',
data:
email: '',
name: ''
);
</script>
我们可以在表单中输入内容，然后在控制台中用vm.$data查看Model的内容，也可以用vm.name查看Model的name属性，它的值和表单对应的<input>是一致的。如果在控制台中用JavaScript更新Model，例如，执行vm.name='Tom'，表单对应的<input>内容就会立刻更新。
可以看出通过v-model实现了表单数据和Model数据的双向绑定。
以上是关于VueVue中单向绑定与双向绑定的理解与使用的主要内容，如果未能解决你的问题，请参考以下文章