VUE：双向绑定

一、 双向绑定:

1. 问题: 使用传统的:value绑定表单元素的内容时，虽然界面中更新了表单元素的内容，但是程序中的变量里却无法获得新的表单元素内容。

2. 原因: 单向绑定: 只能将程序中的变量值，更新到页面中显示。无法实时将页面中的修改的新值，反向更新回程序中的变量里。（只能从Model->View，不会从View->Model）比如: :value就是一种单向绑定.

3. 解决: vue中其实提供了双向绑定的方式:
   1). 什么是双向绑定: 既能将程序中的变量值，更新到页面中显示。又能实时将页面中的修改的新值，反向更新回程序中的变量里。（既能从Model->View，又能从View->Model）
   2). 何时: 今后，只要想实时获得/收集用户在界面上输入或选择的表单元素的新值时，都要用双向绑定。
   3). 如何: <表单元素 v-model="变量">
   view->model
   4). 结果: 只要界面上用户修改了表单元素的值，v-model就会立刻自动将新表单元素值更新回程序中data中的变量里保存。

4. 示例: 使用双向绑定实现点按钮搜索

   
   
   图片1.png
   
   
   图片2.png

v-model.html

  
  
  
  


  
  

    
    百度一下
  
  

运行结果:

图片3.png

5. 原理: 双向绑定的原理: 自动绑定input或change事件+访问器属性+虚拟DOM树
(1). v-model会自动给表单元素绑定input或change事件
(2). 每当界面中表单元素的值发生改变时，就能自动调用事件处理函数。
(3). 在事件处理函数中，可以获得当前表单元素的内容，实时赋值给data中的变量。
(4). 示例: 使用:value和事件模拟实现双向绑定:
_v-model2.html

图片4.png

  
  
  
  


  
  

    
    
    百度一下
  
  

运行结果:

图片5.png

6. 按回车执行搜索: vue中的事件修饰符:
(1). 问题: @keyup可以为元素绑定键盘按下后抬起事件。但是，任何按键都可以触发这个事件。不是我们想要的！我们希望只有按回车键时才能触发事件。
(2). 解决: vue中专门定义了事件修饰符用来限制事件的行为:
比如: @keyup.13="事件处理函数"
只限于按13号键/回车键时才能触发事件。

7. watch: (监视)
   (1). 什么是: 专门在变量值被修改时自动执行一项任务的特殊监视函数.
   (2). 何时: 今后，只要希望一个变量的值一改变，就能立刻执行一个操作时。都用watch
   (3). 如何:

   new Vue({
     el:"#app",
     data:{ 变量名: 值, ... },
     methods:{},
     watch:{
        变量名(){
          
        }
     }
   })

8. 示例: 实现按回车搜索和一边输入一边执行搜索
   _v-model3.html

  
  
  
  


  
  

    
    百度一下
  
  

运行结果:

图片6.png

9. 不同表单元素上的双向绑定效果:
(1). 文本框/textarea :
v-model会自动获得value属性值，并自动更新回程序中data中的变量里保存。
(2). 单选按钮(radio):
a. 特点: 一组单选按钮有多个radio组成。且每个radio的value值都是固定写死的。
b. 如何: 要在每个备选的radio中都写上v-model=sex
男
女
c. 原理:
1). html中，一组相同name名的radio，只能选一个
2). v-model每次只会把选中的一个radio的value值自动更新回程序中变量里。
3). 如果程序中的变量值改变，也会影响页面上radio的选中状态。v-model会取回变量值和当前radio的value值做比较。哪个radio的value值与变量值相等，哪个radio就选中。
d. 示例: 选择性别:

图片7.png

_v-model_radio.html

  
  
  
  


  

    性别: 男
          女
    

    
您选择的性别是:{{sex}}
  
  

运行结果:

image.png

(3). select:
a. 特点:
1). 一个select元素，包含多个option元素
2). select元素中每个value值也都是在每个option上写死的！
b. 如何: v-model只写在select元素上一份即可！

xxx
xxx
xxx
c. 原理:
1). 首次加载页面时: v-model读取出变量的当前值和每个option的value值作比较。哪个option的value值与变量值相等，select就选中哪个option
2). 每当用户切换了select下的选中项时，v-model只会将选中的一个option的value值自动更新回程序中data中变量里保存。
d. 示例:选择城市，显示城市图片

图片8.png

_v-model_select.html

  
  
  
  


  
  

    请选择城市: 

北京 上海 杭州




运行结果:

图片9.png

(4). checkbox单用:
a. 特点: 没有value属性。用户选中与不选中改的是checked属性。
b. 如何:
c. 原理:
1). v-model直接操作和读取checked属性
2). 首次加载页面时，v-model读取变量值。如果变量值为true，则当前checkbox选中。如果变量值为false，则当前checkbox不选中
3). 当用户切换了选中状态，则v-model会直接将checked属性值更新回程序中data中变量里。且值还是bool类型的true或false。
d. 示例: 点同意，启用元素:

图片10.png

_v-model_checkbox.html

  
  
  
  


  
  

    

    用户名:

    

    密码:

    

    同意

    

    注册
  
  

运行结果:

图片11.png

图片12.png