이벤트 수식어

이벤트 수식어

<template>
  <a
    href="https://www.naver.com"
    target="_blank"
    @click="handler">
  NAVER</a>
</template>

<script>
export default {
  methods: {
    handler(e) {
      e.preventDefault();
      console.log( 'jude!' );
    }
  }
}
</script>

• e.preventDafault() 대신 .prevent 수식어를 붙일 수 있다.

<a
  href="https://www.naver.com"
  target="_blank"
  @click.prevent="handler">
NAVER</a>

• once 수식어를 붙이면 이벤트 핸들러가 1번만 실행된다.

<!-- 새창 열림 기능은 계속 작동하지만 이벤트 핸들러는 1번만 실행된다. -->
<a
  href="https://www.naver.com"
  target="_blank"
  @click.once="handler">
NAVER</a>

• 수식어를 두개 이상 붙여서 사용할 수도 있다.

<a
  href="https://www.naver.com"
  target="_blank"
  @click.prevent.once="handler">
NAVER</a>

• 아래와 같이 마우스 휠 이벤트를 적용할 때 로직의 과부하가 생겨 스크롤이 버벅일 수 있는데, 이럴 때 passive 수식어를 사용하면 스크롤은 스크롤대로 동작하고 휠 이벤트의 로직은 로직 나름대로 별도로 동작하기 때문에 성능을 향상시킬 수 있다.

<template>
  <div
    class="parent"
    @wheel.passive="handler">
    <div
      class="child"></div>
  </div>
</template>

<script>
export default {
  methods: {
    handler(e) {
      for(let i = 0; i < 10000; i += 1) {
        console.log( 'A' );
      }
    }
  }
}
</script>