vue2 v-model—绑定事件—深度响应式

Posted 2023-03-04

参考技术A     在表单标签中，v-model双向绑定的用法有所区别。

首先在data中定义好数据：

    在默认情况下，v-model在每次input 事件触发后将输入框的值与数据进行同步(除了上述输入法组合文字时)。可以添加lazy 修饰符,从而转为在change事件之后进行同步:

    如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符,因为即使在 type="number" 时，html 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

    如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

     v-on:指令用来绑定事件，简写为 @ 可以指定一个事件方法，事件方法要在methods里面定义。

指定事件方法时，如果没有给方法传递参数，默认会传递一个事件对象参数

如果我们传递了一个参数，还想再传递事件对象参数，就要通过$event关键字设置：

如果事件处理的逻辑比较简单，可以直接在行内编写：

    在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

可以直接将  KeyboardEvent.key  暴露的任意有效按键名转换为 kebab-case 来作为修饰符：

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如：

您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

用delete方法，删除指定对象的属性或数组的成员

您还可以使用 vm.$delete实例方法，这也是全局 Vue.delete方法的别名：

// 针对数组，只能通过以下方法，才能实现响应式：push() pop() unshift() shift() splice() reverse() sort()

如果不使用以上方法，那么也可以使用set和delete方法