跳到主要内容

2.2-修饰符

Create by fall on:2022-03-13 Recently revised in:2022-09-03

事件修饰符​

  • .stop 阻止事件继续传播
  • .prevent 阻止标签默认行为
  • .capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理。
  • .self 只当在 event.target 是当前元素自身时触发处理函数
  • .once 事件将只会触发一次
  • .passive 告诉浏览器你不想阻止事件的默认行为。.passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

改善性能：处理某些触摸事件（以及其他）的事件时，监听器在尝试处理滚动时可能会阻止浏览器的主线程。从而降低性能表现。可以防止调用事件监听器，导致的用户滚动时阻止页面呈现。

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此：

  • @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为
  • @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

请勿同时使用 .passive 和 .prevent，因为 .prevent 会被忽略并且你的浏览器可能会抛出警告。请记住，.passive 是向浏览器表明你不想阻止事件的默认行为。并且如果你这样做，可能在浏览器中收到一个警告。

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>
<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>
<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

按键修饰符​

vue 为常用的按键提供了别名，放在 @keyup、@keydown 上面

  • .enter、.tab、.esc、.space
  • .delete (捕获 Delete 和 Backspace 两个按键)
  • .up、.down、.left、.right
<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。

  • .ctrl
  • .alt
  • .shift
  • .meta

其中 .meta 按键对应的是不同的，苹果电脑上是 ⌘，win 上是 ⊞。不同的电脑的系统功能键。

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

单独操作符 .exact

允许控制触发一个事件所需的确定组合的系统按键操作符。

<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

鼠标操作符

  • .left
  • .right
  • .middle

v-model 的修饰符​

  • .lazy 通过这个修饰符，转变为在 change 事件再同步
  • .number 自动将用户的输入值转化为数值类型
  • .trim 自动过滤用户输入的首尾空格

自定义修饰符​

这里介绍一下 Vue3 的修饰符，修饰符是放在，props中

<script setup>
defineProps({
  modelValue:String,// v-model，默认的绑定
  modelModifiers:{ // v-model 上的所有修饰符
    default:()=>({}) // 默认值设置为对象，防止访问失败时报错
  },
  title:String, // 比如自定义了个 title
  titleModifiers:{ // 这是自定义参数的 Modifiers
    default:()=>({})
  }
})
</script>

参考文章​

作者链接
Big shark@LXhttps://juejin.cn/post/6961222829979697165