Vue.js常见事件修饰符

  1.stop：

• 阻止事件冒泡。通常用于防止事件向上传播到父元素。

• <a @click.stop="handleClick">Click me</a>
  

  2.prevent：

• 阻止事件的默认行为。例如，在表单提交时阻止页面的重新加载。

• <form @submit.prevent="handleSubmit">Submit</form>
  

  3.capture：

• 添加事件监听器时使用事件捕获模式。即在捕获阶段处理事件，而不是在冒泡阶段。

• <div @click.capture="handleClick">Capture click</div>
  

  4.self：

• 只在事件是从触发事件的元素自身触发时执行处理函数。防止事件冒泡到父元素。

• <div @click.self="handleClick">Click me</div>
  

  5.once：

• 事件将只会触发一次。一旦触发，监听器将被移除。

• <button @click.once="handleClick">Click me once</button>
  

  6.passive：

• 提示浏览器不要阻止事件的默认行为。通常用于提高滚动性能。

• <div @touchmove.passive="handleTouchMove">Touch Move</div>
  

  7.native：

• 监听组件根元素的原生事件，而不是组件内部使用 v-on 监听的事件。

• <my-component @click.native="handleNativeClick"></my-component>
  

  8.keyCode：

• 仅在指定的按键码触发时调用处理函数。已过时，推荐使用 .key。

• <input @keyup.13="handleEnterKey">
  

  9.key：

• 仅在指定的按键触发时调用处理函数。

• <input @keyup.enter="handleEnterKey">