vue2之修饰符

image.png

——《kill 空格》灵魂画手作品欣赏

事件修饰符

.stop修饰符

用法

@event.stop="event"

作用

阻止事件冒泡

补充

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

.prevent修饰符

用法

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

作用

阻止标签等自带的默认事件

实战：阻止表单回车事件刷新界面问题。

当表单只有一个input时，回车键默认触发表单的submit事件。我们需要阻止这个事件。
<el-form @submit.native.prevent><input @keyup.enter.native="query()"/></el-form>

.self修饰符

用法

<div @event.self="eventA">
  <div @event.self="eventB"></div>
</div>

作用

只触发自己的事件，不触发子元素和父元素的事件。鸡肋修饰符！！

.once修饰符

用法

<div @event.once="eventA"></div>

作用

只触发一次直到这个实例被销毁再也不会触发了。任你随意点击！

键盘修饰符

• .enter：回车键
• .tab：制表键
• .delete：含delete和backspace键
• .esc：返回键
• .space: 空格键
• .up：向上键
• .down：向下键
• .left：向左键
• .right：向右键
  ……更多请自行百度！！哈哈哈

数据绑定v-model修饰符

.trim修饰符

用法

<input v-model.trim="name"/>

作用

image.png

.number修饰符

用法

<input v-model.number="number"/>

作用就只是你输入number = 1111qwec的时候，number只认1111，但是如果你输入aaa1111的时候，还是等于aaa1111。觉得是个有缺陷的修饰符！个人愚见！

.lazy修饰符

用法

<input v-model.lazy="name"/>

作用就是我没想到有啥实际作用！延迟了同步更新属性值的时机而已。本身是同时，但是加了之后变成了失去焦点和回车事件时同步。