v-on

@로 대체가 가능하다.

1. 이벤트 작성방법

1. 메소드 이벤트 핸들러 : @click="greet"
2. 인라인 메소드 핸들러 : @click="say('hi')
3. 복합 이벤트 핸들러 : @click="one($event), two($event)"

• 2,3의 경우 매개변수로 $event를 지정하면 event로 전달 해 줄 수있다.

2. 이벤트 수식어

.stop => event.stopPropagation
.prevent => event.preventDefault
.capture
.self
.once
.passive

사용법

@click뒤에 붙여서 쓴다.

이벤트 캡쳐링 버블링

기본적으로는 버블링 형태고 진행한다.

<div id="app">
  <div class="parent" @click="log">
    <div class="child" @click="log"></div>
  </div>
</div>
</body>
<script>
  const App = {
    data(){
      return {
        msg : 'Vue!'
      }
    },
    methods:{
      log(event){
        console.log(event.currentTarget)
      }
    }
  }
  const vm = Vue.createApp(App).mount('#app')
</script>

child를 클릭할 경우 이벤트 버블링에 의해 child태그의 log함수와 parent태그의 log함수가 차례로 실행된다.
child -> parent

해당 부분을 각각 @click.capture로 바꾼다면
캡쳐링을 통해 진행되어 parent태그의 log함수와 child태그의 log함수가 차례로 시행된다.
parent -> child

parent를 @click.capture로 하고
child를 @click.stop로 하면
child부분을 클릭했을때 capture로 parent가 먼저 반응하고 그아래 child가 반응하면서 버블링 되지않고 멈춘다

이벤트 방지

@click.prevent 사용

1번만 실행시키기

@click.once를 이용해서 1번만 진행시킨다.

ex)

  <a href="https://google.com"
      target="_blank"
      @click.once.prevent="log">Google</a>

해당 태그의 경우 prevent가 진행되는 것과 log함수가 실행되는것이 1번만 진행되고 그외에는 default에 함수 실행을 하지않는다.

• 처음클릭시 : log함수실행 + href로 넘어가지 않음
• 그후 클릭시 : log함수 실행X + href로 넘어간다.

event.currentTarget / event.target

<div id="app">
  <div class="parent"
       @click.stop="log">
    <div class="child"></div>
  </div>
</div>
</body>
<script>
  const App = {
    data(){
      return {
        msg : 'Vue!'
      }
    },
    methods:{
      log(event){
        console.log(event.currentTarget,event.target)
      }
    }
  }
  const vm = Vue.createApp(App).mount('#app')
</script>

• event.currentTarget : 이벤트 핸들러가 등록된 태그 대상
• event.target : 실제 클릭이 적용된 태그 대상

• 현재 상황에서 child를 클릭하면 버블링에 의해 click이벤트가 부모인 parent에서 발생하므로 원하는 목표인 파란 부모부분에서만 작동 시키기 위해서는 @click.self로 바꾼다.

• .self의 기능은 currentTarget과 target이 같을때만 동작시키게 하는 역할을 지닌다.

3. 키수식어

Enter -> .enter
ArrowDown -> .arrow-down
Alt -> .alt

• 위와같이 소문자를 대문자로 대문자+대문자 형태는 -로 구분하였다.

ex)

  <input @keyup.arrow-down="log"/>

input 태그에서 ArrowDown을 눌러야 log함수가 동작한다.

중복가능

ex)

  <input @keyup.arrow-down.enter="log"/>

arrow-down이나 enter일때 log함수가 실행

exact의 기능

다른 시스템 수식어와 조합해 그 핸들러가 실행되기 위해 정확한 조합이 눌러야하는 것을 요구

<!-- 아래코드는 Alt 또는 Shift와 함께 눌렀을 때도 실행됩니다.-->
<button @click.ctrl="onClick">A</button>

<!-- 아래코드는 Cntl키만 눌려져 있을 때 실행됩니다.-->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 아래 코드는 시스템 키가 눌리지 않은 상태인 경우에만 작동합니다.-->
<button @click.exact="onClick">A</button>

주의!!!!

exact의 대상은 .alt .enter .ctrl등 과 같은 키수식어이다. 만약 키수식어가 아니라 알파벳 같은거랑 같이 눌러도 동작은 한다.

v-on이나 @를 사용하면 몇가지 이점

HTML 템플릿을 간단히 하여 JavaScript 코드 내에서 핸들러 함수 구현을 찾는 것이 더 쉽습니다. =>SFC와 관련

JavaScript에서 이벤트 리스너를 수동으로 연결할 필요가 없으므로 ViewModel 코드는 순수 로직과 DOM이 필요하지 않습니다. 이렇게 하면 테스트가 쉬워집니다. => document.querySelector 이런것으로 연결할 필요가 없다.

ViewModel이 파기되면 모든 이벤트 리스너가 자동으로 제거 됩니다. 이벤트 제거에 대한 걱정이 필요없어집니다.