什么是双向绑定：
即可以将内存中的数据绑定到界面上，同时又能将界面的修改反向更新回模型变量中(M-V,V-M)
何时使用双向绑定：
当需要绑定表单元素的值时，就使用双向绑定。
如何使用双向绑定：
<表单元素 v-model：value="模型变量">，其中：value可省略
双向绑定的原理：
Vue用一个死循环，反复扫描虚拟DOM树中的每个节点一一监视比对，如果希望只要界面发生变化，就立刻自动执行操作时：利用watch监视模型变量。(watch和methods同级)
只要绑定表单元素的值都用v-model，v-model相对于：不但可以把内存中的值绑到页面，当页面发生修改还会自动更新到内存中。(v-model双向绑定，：value单向)
键盘事件@keyup.13，限制只有按键盘回车键(13)时才执行操作。
各种表单元素的双向绑定：
①文本框:<input type="text">和文本域:<textarea> 都是绑定value
<ANY v-model="模型变量"> v-model自动绑定value属性
②单选按钮:<input type="radio" name="分组名" value="值" v-model="模型变量">
分组使用:M-V 如果模型变量的值等于value，则当前radio标签选中，否则不选中。
(lable标签可以扩大选中区域，name属性来锁定radio标签的单选范围)
V-M 将当前选中的radio元素的value值自动更新回模型变量。
③多选框:
<input type="checkbox" v-model="模型变量">
单用:自动绑定的是checked属性
④select:
<select v-model="模型变量">
<option value="值">
<option value="值">
... ...
M-V: 用模型变量的值和每个option的value做比较，如果某个option的value等于模型变量的值，则该option被选中。
V_M:当选中项发生改变的时候，自动将选中项的value，更新到模型变量中。
MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
1、 M：模型层，主要负责业务数据相关；
2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；
原文地址：https://www.cnblogs.com/goforxiaobo/p/12409177.html