vue双向绑定

315 阅读3分钟
  1. 问题:单向绑定的确可以将new Vue()中的变量值更新到页面显示,但还是无法将页面中用户输入的新内容,自动反向更新到new Vue()中保存
  2. 单向绑定:只能将new Vue()中模型对象转给你变量值的修改更新到页面上显示,如果页面中元素内容发生变化,无法自动将更改更新会new Vue()中的模型对象中保存
  3. 解决:今后只要希望自动获得用户在界面上输入或选择的新值,只能用双向绑定
  4. 双向绑定:既能将new Vue()中模型对象中变量值的修改更新到页面上显示.又能将页面中元素内容发生的变化,自动更新回new Vue()中的模型对象中保存
  5. 如何:<表单元素 v-model:可能变化的属性="变量"> 简写:<表单元素 v-model="变量">
  6. 强调:双向绑定几乎只用在表单元素上
  7. 原理:v-model包含两部分原理
(1).从Model->View的绑定:访问器属性+虚拟DOM树
(2).从View->Model的绑定是新的原理:
    new Vue()扫描到包含v-model的表单元素时,就自动为表单元素绑定onchange=function(){}
    事件处理函数,意为当表单元素的值发生变化时,
    就自动触发.然后在onchange事件处理函数内,
    包含自动获取当前元素值并自动更新回Vue中指定变量中保存的语句
示例:
 本例中: 点击button执行查找操作
          用户在文本框上按回车,也能执行和按钮的click一样的查找操作!-->
  <div id="app">
    <input type="text" @keyup="search2" v-model:value="keywords">
    <button @click="search">百度一下</button>
  </div>
  <script>
    //2. 定义new Vue()对象
    new Vue({
      el:"#app",
      //3. 定义模型对象
      //问题: 页面中共需要几个变量
      //本例中: 页面中只需要一个变量keywords,且如果用户未输入时,
      keywords的默认值为""
      //问题: 页面中共需要几个事件处理函数
      //本例中: 按钮需要search函数
      //       文本框需要search2函数
      data:{
        keywords:""
      },
      methods:{
        search(){
          //如果用户输入的关键词去空格后不为空
          //if(this.keywords.trim()!==""){
            //才用关键词执行查找操作
            console.log(`查找 ${this.keywords} 相关的内容....`)
          //}
        },
        search2(e){
          //只有点在回车上,才执行search操作
          if(e.keyCode==13){
            this.search();
          }
        }
      }
    })
  </script>

图片2.png

8.问题:不是所有表单元素修改时,更新的收视value属性,比如radio和checkbox元素更新时,更新的就不是value属性,而是value属性写死固定不变,而跟新checked选中状态属性 9.解决:用户修改表单元素时,哪个属性变化,就用v-model绑定哪个属性.比如:如果value属性值可能发生变化,就用v-model:value="变量",再比如如果checked属性可能发生变化,就用v-model:checked="变量" 10.其他类型的表单元素如何双向数据绑定:

(1).单选按钮:<input type="radio">
a.当用户选中与不选中时,修改的是checked属性,所以如果双向绑定时
  应该用v-model:checked="变量"
b.如何:<input type="radio" value="写死的值" v-model="变量">
c.原理:
     1).从Model-View绑定时,v-model先自动用变量的值和写死的value值做比较,
     如果变量值==value值,则当前radio选中,否则如果变量值!=value值,则当前radio不选中.
     2).从View->Model绑定时,当用户切换选中状态时,自动触发onchange事件,
     onchange事件中只将选中的radio的值自动更新回v-model绑定的变量中
(2).下拉选择框:<select>...</select>
     a.当用户在select内选择不同的option时,其实改的是整个select的value属性
     b.如何:<select v-model="变量">
     c.原理:
         1).从Model-> view绑定时,v-model将变量值自动和每个option的value比较,
         哪个option的value值与变量值相等,就自动选中这个option
(3).复选框单独使用:<input type="checkbox">
     a.用户选中或不选中checkbox时,更改的是checked属性
     b.如何:<input type="checkbox" v-model="变量">
     c.强调:不需要写value,且checked值应该是一个bool值!true就选中,false就不选中
     d.原理:
        1).从Model->View绑定,变量值为true,就选中,变量值Wiefalse就不选中
        2).从View->Model绑定,用户选中checkbox,就将true传到vue中变量里保存,
        如果用户未选中checkbox,就将false传到vue中变量里保存

11.简写:v-model后的:value和:checked全部都可以省略! 双向数据绑定只写<表单元素 v-model="变量"> 因为v-model会自定义区分该绑定哪个元素,不用人为区分