VUE表单元素双向数据绑定

Posted 2020-11-26 goforxiaobo

什么是双向绑定：

即可以将内存中的数据绑定到界面上，同时又能将界面的修改反向更新回模型变量中(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层数据进行修改，以此也实现了视图与模型层的相互解耦；