1. 什么是双向绑定？

• {{}}和v-bind仅是单向绑定。只能将Model数据的值，绑定到页面表单元素上，用于显示(M—>V)，而页面上的更改，无法对应修改到Model数据中(V—>×M)。
• 双向绑定既可把程序中Model数据绑定到表单元素中显示，第一个方向：M—>V；同时，又可把表单元素中修改的值，绑定回程序中Model数据变量上保存，第二个方向：V—>M。
• 今后，只要希望修改表单元素的值后，也能自动修改对应模型数据的值，则用v-model指令进行绑定。

2.如何进行双向绑定？

• 绑定文本框和文本域
  <input type="text" v-model:value="变量">
  <textarea v-model:value="变量" ></textarea>
  结果：文本框内容一更新，立刻将新值自动更新回程序的变量里。
  原理：v-model:value会被自动翻译为oninput="function(){...}"事件绑定代码，并在事件处理函数中封装修改data中变量的代码。只要文本框内容被修改，就触发DOM的oninput事件，自动执行修改data中的变量的代码。
• 绑定select元素
  用不是直接修改select元素的文本，而是通过选择option来改变select的value。
  例如：

<select v-model:value="orderStatus">
  <option value="10">未付款</option>
  <option value="20">已付款</option>
  <option value="30">已发货</option>
  <option value="40">已签收</option>
</select>

结果：select的选中项的值改变，就会立刻将新选中的option的value值更新回内存的程序里。
原理：单向绑定时：将Model中的变量值赋值给select的value属性，然后，select元素会获得value属性值去和每个option的value值做比较。哪个option的value等于select的value，就选中哪个option。修改时，<select v-model:value="×××">会被自动翻译为：<select onchange="vue对象.变量=当前select元素的value属性值">。

• 绑定radio元素
  备选项的value都是固定不变的，所以肯定绑定的不是value属性，选中与不选中radio改变的其实是它的checked属性。
  例如：

<label><input type="radio" value="1" v-model:checked="sex">男</label>
<label><input type="radio" value="0" v-model:checked="sex">女</label>

原理：单向绑定时，v-model会拿checked属性绑定的变量值和当前radio的value属性进行比较。如果绑定的变量的值等于当前radio的vaue，就选中该radio，否则，如果绑定的变量值，不等于当前radio的value，就不选中该radio。

• 绑定checkbox元素
  不需要和value作比较，直接用checked属性绑定到一个bool值变量即可。
  <input type="checkbox" v-mode:checked="isAgree">同意
  原理：单向绑定时：绑定的变量值返回true，就选中，返回false，就不选中。修改时：直接将checkbox当前的选中状态checked属性值更新回模型变量上。

简写形式：v-model="模型变量"，省略：value

v-model其实会自动根据当前所在的不同表单元素，切换不同的属性绑定。

监视函数

• 什么是监视函数
  在模型数据发生变化时，自动执行的函数
• 什么时候用监视函数
  只要希望在模型数据发生变化时，立刻执行一项操作时，需要监视函数监控模型变量
• 如何用监视函数

new Vue({
    el:"×××",
    data:{...}
    watch:{
      模型变量名(){
        //想要执行的函数操作
    }
  }
})

• 监视函数的函数名，必须是要监视的变量名。