vue修饰符stop once lazy prevent capture v-model

事件修饰符

.stop修饰符

用法

@event.stop="event"

作用

阻止事件冒泡

补充

**

// 元素事件
<div @click="stop"></div>
stop(e) {
  e.stopPropagation()
}

.prevent修饰符

用法

<a href="#" @event.prevent="event">

作用

阻止标签等自带的默认事件 浏览文章的时候，忽然看见了 v-model.trim 这个写法，忽感兴趣，特意去查了下，然后发现还有些别的修饰符，都是日常中挺实用的，特来记录下 官方链接

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

1 .lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。添加 lazy 修饰符，从而转为在 change 事件之后进行同步。 上述句子转为大白话就是：输入框失去焦点后触发change事件。 1 .number 自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： 1 注意：v-model.number是有字符长度限制的，length<11 Vue中的事件修饰符 prevent阻止默认事件，stop阻止事件冒泡，once事件只触发一次，capture使用事件的捕获模式，self只有event.target是当前操作的元素时候才触发事件，passvie事件的默认行为立即执行，无需等待事件回调执行完毕

            1.prevent:  阻止默认事件

            2.stop:  阻止事件冒泡

            3.once:  事件只触发一次

            4.capture:  使用事件的捕获模式

            5.self:  只有event.target是当前操作的元素时才触发事件

            6.passive:  事件的默认行为立即执行，无需等待事件回调执行完毕

        ！！！修饰符可以连续写  .prevent.stop  //先阻止默认事件后阻止冒泡

例