Vue06: Vue 双向绑定

什么是双向数据绑定？

Vue.js 是一个MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生了变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js 的精髓之处了。

所谓的双向绑定，一定滴对于UI 控件来说，非UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态 管理工具的前提。如果我们使用vuex, 那么数据流也是单向的，这时就会和双向数据绑定有冲突。

为什么要是实现数据的双向绑定？

在Vue.js 中，如果使用vuex, 实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI 控件来说，对于我们处理表单，Vue.js 的双向数据绑定用起来就比较方便，即两者互不排斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

在 表单中使用双向数据绑定

可以使用v-model 指令在表单<input> <textarea> 及<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model 本质上不过是语法糖，它负责监听用户的输入事件以及更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model 会忽略所有表单元素的value/checked/selected 的特性的初始值而总是将Vue 实例的数据作为数据来源。我们应该通过javaScript 在组件的data 选项中声明初始值