v-on 수식어

이벤트 수식어

.stop

- 자식 요소의 이벤트가 부모 요소의 이벤트를 호출하지 않도록 설정

<!-- 클릭 이벤트 전파 중지 -->
<div @click.stop="doThis">Click</div>

.prevent

- 페이지 새로고침 방지 

ex) 입력창에 무언가를 입력한 다음 전송 버튼을 눌러도 렌더링 X

<form v-on:submit.prevent="submitForm">
    <input type="text">
    <button>Sign up</button>
</form>

.self

- 자식 요소의 이벤트를 실행해도 부모 요소의 메소드 실행 X 

- .self를 지정한 부모 요소를 직접 실행해야지만 이벤트가 실행됨

<template>
  <div
    class="parent"
    @click.self="handlerA">
    <div
      class="child"></div>
  </div>
</template>

.once

- 이벤트를 실행했을 때 해당하는 메소드를 단 한번만 실행되도록 설정

- v-on의 .once가 아닌 v-once로도 적용가능

.capture

- 우선순위를 무시하고 가장 먼저 실행

EX) div3 -> div2 -> div1 순서가 정상이지만 div1 -> div3 -> div2 순으로 실행

<div
  class="div1"
  @click.capture="func1"
  style="background: red; padding: 10px;"
>
  div1
  <div class="div2" @click="func2" style="background: green; padding: 10px;">
    div2
    <div class="div3" @click="func3" style="background: blue; padding: 10px;">
      div3
    </div>
  </div>
</div>

.passive

- 이벤트에 해당하는 메소드의 로직 처리와 화면의 동작을 완전히 독립시켜주도록 설정 (일반적으로는 로직 처리와 화면 동작이 동시에 실행)

- .prevent와 혼용 X

 

입력키 수식어

- 해당되는 키를 누르면 이벤트가 실행

- .enter

- .tab

- .delete (delete와 백스페이스 모두)

- .esc

- .space

- .up, .down, .left, .right

 

마우스 수식어

- .left (기본값)

- .middle 

- .right