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:{
模型变量名(){
//想要执行的函数操作
}
}
})
- 监视函数的函数名，必须是要监视的变量名。
