[JavaScript知识库] 【vue】vue双向数据绑定的原理解析及代码实现

用传统的:绑定表单元素的value属性，无法自动获得界面上用户输入的新内容。

2. 原因

???????? a. 可自动将程序中的变化，更新到界面上显示(Model->View)

???????? b. 但是，如果界面中用户修改了内容，则无法将新内容自动更新到程序中的变量中(View ×-> Model)

???????? a. 即可以自动将程序中的变化，更新到界面上显示(Model->View)

???????? b. 又可以自动将界面上用户修改的新内容自动更新回程序中的变量中(View -> Model)

3. 何时使用双向绑定

今后，只要在vue中，想获得表单元素的新内容，都用双向绑定！

4. 如何使用双向绑定: （普通文本框）

5. 结果

???????? (1). 程序中变量值发生了变化，则自动将程序中的变量值更新到界面上显示

???????? (2). 用户在界面中输入了新内容，则自动将界面上的新内容，更新回data中的变量里保存。

6. 示例: 文本框输入搜索关键词，点按钮执行搜索

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 做界面-->
  <div id="app">
    <!--1.1 找可能发生变化的位置
      本例中: 文本框的内容可能发生变化-->
    <input type="text" v-model:value="keywords">
    <!--1.2 找触发事件的元素
      本例中: button触发事件-->
    <button @click="search">百度一下</button>
  </div>
  <script>
    //2. 创建new Vue()对象
    var vm=new Vue({
      el:"#app",
      //3. 创建模型对象
      //3.1 因为界面上只需要一个变量，所以
      data:{
        keywords:"" //保存用户在文本框中输入的内容，开局，用户什么都没输入，默认""
      },
      //3.2 因为界面上需要一个函数
      methods:{
        search(){
          console.log(`查找 ${this.keywords} 相关的内容...`);
        }
      }
    })
  </script>
</body>
</html>
<!-- 事到如今呀。。。有些事儿，你也该知道了。孩子大了，瞒不住了。
其实，v-model后的“：value”和“：checkex”都可以省略。v-model很聪明，可以根据自己所在何种元素，自动判断应该绑定哪个属性。
比如，在文本框就自动绑定value属性，在radio就自动绑定checked属性。
虽然可以简写，但是，简写后更看不出原理，所以，一定要先把学习到的这四种不同情况，做熟练，再享受简写带来的便利。虽然简写，但是原理不变。 -->

7. 双向绑定的原理

v-model会自动为当前表单元素绑定: @input或@change。当当前表单元素的value值发生变化时，自动触发事件，调用事件处理函数，自动修改data中的变量。

8. 示例: 使用事件模拟v-model的原理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双向绑定原理:使用@input事件模拟实现双向绑定</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 做界面-->
  <div id="app">
    <!--1.1 找可能发生变化的位置
      本例中: 文本框的内容可能发生变化-->
    <input type="text" @input="myInput" :value="keywords">
    <!--1.2 找触发事件的元素
      本例中: button触发事件-->
    <button @click="search">百度一下</button>
  </div>
  <script>
    //2. 创建new Vue()对象
    var vm=new Vue({
      el:"#app",
      //3. 创建模型对象
      //3.1 因为界面上只需要一个变量，所以
      data:{
        keywords:"" //保存用户在文本框中输入的内容，开局，用户什么都没输入，默认""
      },
      //3.2 因为界面上需要一个函数
      methods:{
        search(){
          console.log(`查找 ${this.keywords} 相关的内容...`);
        },
        myInput(e){
          //this不指当前触发事件的元素了
          //vue中所有的this都指向当前new Vue()对象本身！
          //获得当前文本框的内容
          var value=e.target.value;
          //        当前文本框 内容
          //将文本框的内容自动修改到data中的keywords变量上
          this.keywords=value;
        }
      }
    })
  </script>
</body>
</html>
<!-- 事到如今呀。。。有些事儿，你也该知道了。孩子大了，瞒不住了。
其实，v-model后的“：value”和“：checkex”都可以省略。v-model很聪明，可以根据自己所在何种元素，自动判断应该绑定哪个属性。
比如，在文本框就自动绑定value属性，在radio就自动绑定checked属性。
虽然可以简写，但是，简写后更看不出原理，所以，一定要先把学习到的这四种不同情况，做熟练，再享受简写带来的便利。虽然简写，但是原理不变。 -->

9. 实现按回车搜索，边输入边搜索

???????? b. 问题: 虽然可以实现边输入边搜索，但是，按任意键都执行搜索，不是我们想要的。我们希望只有按回车才执行搜索

????????????????? 1). 什么是: 对触发事件的条件或默认行为加以限制

????????????????? 2). 比如: @keyup.13，表示只有13号回车键才能触发事件

???????? d. 问题: 如果只有13号键可以触发事件，那么，如何实现边输入边搜索呢？

???????? a. 什么是"监听函数": 当data中某个变量一改变，就会立刻自动触发的特殊函数。

????????b. 何时: 今后，只要希望data中的一个变量一变，立刻自动执行一个操作时，都要用监听函数！——每个变量都可以有一个监听函数

??????????????????????????????????????????? //只有data中同名变量的值发生变化时自动触发！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 做界面-->
  <div id="app">
    <!--1.1 找可能发生变化的位置
      本例中: 文本框的内容可能发生变化-->
    <!--1.2 找触发事件的元素
      本例中: 
      button触发单击事件
      input还可触发键盘抬起事件，但是，只允许13号键触发事件-->
    <input type="text" v-model:value="keywords" @keyup.13="search">
    <button @click="search">百度一下</button>
  </div>
  <script>
    //2. 创建new Vue()对象
    var vm=new Vue({
      el:"#app",
      //3. 创建模型对象
      //3.1 因为界面上只需要一个变量，所以
      data:{
        keywords:"" //保存用户在文本框中输入的内容，开局，用户什么都没输入，默认""
      },
      //3.2 因为界面上需要一个函数
      methods:{
        search(){
          console.log(`查找 ${this.keywords} 相关的内容...`);
        }
      },
      watch:{//专门保存所有监听函数的区域
        keywords(){//专门监听data中keywords变量的函数
          //希望只要keywords变量发生改变，就自动搜索
          this.search();
        }
      }
    })
  </script>
</body>
</html>
<!-- 事到如今呀。。。有些事儿，你也该知道了。孩子大了，瞒不住了。
其实，v-model后的“：value”和“：checkex”都可以省略。v-model很聪明，可以根据自己所在何种元素，自动判断应该绑定哪个属性。
比如，在文本框就自动绑定value属性，在radio就自动绑定checked属性。
虽然可以简写，但是，简写后更看不出原理，所以，一定要先把学习到的这四种不同情况，做熟练，再享受简写带来的便利。虽然简写，但是原理不变。 -->

10. 不同表单元素，绑定原理不同

???????? 对应小程序视频: 小程序->在线->VUE->day02 4. 双向绑定 v-mode radio ...

????????????????? 1). 提前准备好一批写死的value，让用户多选一。

???????? ???????? 2). 选中哪个radio或不选中哪个radio改变的是checked

???????? <input type="radio" value="1" name="sex" v-model:checked="变量">男
???????? <input type="radio" value="0" name="sex" v-model:checked="变量">女

????????????????1). Model变->View跟着变: v-model会拿变量的新值和当前的radio写死的value值做比较。如果变量的新值==当前radio的value值，则当前radio选中。否则如果变量的新值!=当前radio的value值，则当前radio不选中

????????????????? 2). View变->Model跟着变: v-model会将当前选中的radio的value自动更新到变量中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 把表单元素写在label里，可以扩大选中区域 -->
    <label><input type="radio" value="1" name="sex" v-model:checked="sex">男</label>
    <label><input type="radio" value="0" name="sex" v-model:checked="sex">女</label>
    <h3>我是{{sex==1?"男生♂":"女生♀"}}</h3>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        sex:1
      }
    })
  </script>
</body>
</html>
<!-- 事到如今呀。。。有些事儿，你也该知道了。孩子大了，瞒不住了。
其实，v-model后的“：value”和“：checkex”都可以省略。v-model很聪明，可以根据自己所在何种元素，自动判断应该绑定哪个属性。
比如，在文本框就自动绑定value属性，在radio就自动绑定checked属性。
虽然可以简写，但是，简写后更看不出原理，所以，一定要先把学习到的这四种不同情况，做熟练，再享受简写带来的便利。虽然简写，但是原理不变。 -->

????????????????? 2). 用户每选择一个option，就会将当前选中的option的value值交给整个select的value属性

????????????????? 3). 所以，应该将v-model绑定在每次都会被改变的select的value属性上

????????????????? <select v-model:value="变量">
????????????????????????? <option value="值1">文本</option>

????????????????? 1). Model变->View跟着变: v-model会用=右边的变量值和select下每个option的value值做比较。哪个option的value值==变量值，这个option就被选中

????????????????? 2). View变->Model跟着变: 用户选择了哪个option。select就会把选中的option的value交给select的value。然后v-model就将select的新value，自动更新到=右边的变量中保存

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <select v-model:value="orderStatus">
      <option value="0">未付款</option>
      <option value="10">已付款</option>
      <option value="20">已发货</option>
      <option value="30">已签收</option>
    </select>
    <h3>当前订单状态为: {{orderStatus==0?"未付款":orderStatus==10?"已付款":orderStatus==20?"已发货":"已签收"}}</h3>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        orderStatus:0 //保存当前订单状态，开局是未付款
      }
    })
  </script>
</body>
</html>
<!-- 事到如今呀。。。有些事儿，你也该知道了。孩子大了，瞒不住了。
其实，v-model后的“：value”和“：checkex”都可以省略。v-model很聪明，可以根据自己所在何种元素，自动判断应该绑定哪个属性。
比如，在文本框就自动绑定value属性，在radio就自动绑定checked属性。
虽然可以简写，但是，简写后更看不出原理，所以，一定要先把学习到的这四种不同情况，做熟练，再享受简写带来的便利。虽然简写，但是原理不变。 -->

???????? 对应小程序视频列表: 小程序->在线->VUE->day02 6. 双向绑定 v-model checkbox ...

???????? a. 特点: 不需要value属性，单纯修改checked属性，就可切换两种状态，所以，v-model应该绑定在checked属性上。且绑定的变量只有两种值: true或false.

????????????????? 1). Model变->View跟着变: 变量值为true，则选中;变量值为false,则未选中。

????????????????? 2). View变->Model跟着变: 将当前checkbox的选中状态(checked属性值)自动更新回程序中的变量里。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 先做界面-->
  <div id="app">
    <!--1.1 找可能发生变化的位置: 
      两个文本框+按钮的disabled只需要一个变量控制即可——是否同意——isAgree
      用户选中checkbox修改isAgree的同意状态-->
    用户名:<input :disabled="isAgree==false"><br/>
    密码:<input type="password"  :disabled="isAgree==false"><br/>
    <input type="checkbox" v-model:checked="isAgree">同意<br/>
    <button  :disabled="isAgree==false">注册</button>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        isAgree:false //保存是否同意的状态，开局，默认不同意。
      }
    })
  </script>
</body>
</html>
<!-- 事到如今呀。。。有些事儿，你也该知道了。孩子大了，瞒不住了。
其实，v-model后的“：value”和“：checkex”都可以省略。v-model很聪明，可以根据自己所在何种元素，自动判断应该绑定哪个属性。
比如，在文本框就自动绑定value属性，在radio就自动绑定checked属性。
虽然可以简写，但是，简写后更看不出原理，所以，一定要先把学习到的这四种不同情况，做熟练，再享受简写带来的便利。虽然简写，但是原理不变。 -->

11. v-model简写

以上案例中， v-model后的":value"或":checked"，都可省略。v-model可自动根据自己所在的元素判断绑定哪种元素。但是，虽然简写，原理是不变的！

💥 扩展：this判断—8种指向

this ?8种指向: 判断this，~~一定不要看定义在哪儿！~~只看调用时！

?? 2. fun() 或 (function(){ ... })() 或多数回调函数或定时器函数?? this->window

?? 4. 类型名.prototype.共有方法=function(){ ... }?? this->将来谁调用指谁，同第一种情况

?? 5. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?如果需要使用简化版函数，必须$(this)

?? 7. jQuery.fn.自定义函数=function(){ ... }?? this->将来调用这个自定义函数的.前的jQuery子对象，~~不用再$(this)~~

?? 总结：知识点提炼

???????? 变量被修改时: 访问器属性发出通知，虚拟DOM树扫描并仅更新受影响的元素

? ??通常是<div id="app">
? b. 可能变化的元素内容用{{自定义变量名}}标记

(4). 控制两个元素二选一显示: ?v-if? v-else //使用删除元素方式隐藏元素

(6). 只要反复生成多个相同结构的元素组成列表时: v-for ?:key="唯一标识"

强调: 为什么必须加:key="i"？给每个元素副本添加唯一标识。修改数组中某个元素值时，避免重建整个列表，只需要修改一个DOM元素副本即可！提高修改效率。

(10). 如果元素的内容只在首次加载时绑定一次，之后都不会改变: v-once