双向数据绑定使用和原理
-
定义：vue中双向绑定就是指v-model指令，可以绑定一个响应式数据到视图，同时视图中变化能同步改变该值。
-
v-model是语法糖，作用在表单项和自定义组件上，表示某个值的输入和输出控制；使用v-model可以减少大量繁琐的事件处理代码，达到提高开发效率的目的。
-
作用在表单项上时，会根据所使用的元素自动使用对应的DOM属性和事件组合，默认情况下会指定value和input；v-model可以根据不同元素绑定不同的动态数据，且不局限于字符串类型：
- 对于checkbox，可以使用true-value和false-value绑定动态数据；
- 对于radio，可以使用value绑定动态数据；
- 对于select，可以通过option的value绑定动态数据；
-
v-model还可以结合修饰符做进一步操作：
- .lazy可以将v-model操作input事件的默认行为改为操作change事件；
- .number可以将用户输入通过parseFloat()处理为数字类型，不能处理则返回原始值；
- .trim可以去除用户输入内容中两端的空格；
-
作用在组件上时，v-model行为有所不同：vue3中它类似于.sync修饰符，最终展开的结果为modelValue属性和update:modelValue事件；vue3中还可以用参数形式指定多个不同的绑定：例如v-model:foo和v-model:bar；