双向绑定和单向绑定

假设现在页面（View层）上有一个input 标签，如果我们要获取到input中的value，那么必须使用JS（Model层）为input绑定事件来监听它，从而获取input中输入的数据；当要设置input的值时，也是通过JS来设置，这就是单向绑定

双向绑定

双向绑定就是我不需要为input绑定事件，对它进行监听，input的变化会实时反应到我这儿；

用Vue.js中的v-model来添加双向绑定：
<input v-model="xxx">
其实上面的代码等价于下面的：
<input :value="xxx" @input="xxx = $event.target.value">
也就是说：

双向绑定 = 单向绑定 + UI事件监听

JSbin演示

参考：vue.js中的v-model

双向绑定与单向绑定有优缺点

单向绑定：使得数据流也是单向的，对于复杂应用来说这是实施统一的状态管理（如redux）的前提。

双向绑定：在一些需要实时反应用户输入的场合会非常方便（比如多级联动菜单）。但通常认为复杂应用中这种便利比不上引入状态管理带来的优势。因为我们不知道状态什么时候发生改变，是谁造成的改变，数据变更也不会通知我们

注意，Vue 虽然通过 v-model 支持双向绑定，但是如果引入了类似redux的vuex，就无法同时使用 v-model