Vue.js 문법 - 이벤트 핸들링

 

이벤트 청취

 

v-on 디렉티브는 Dom 이벤트를 듣고 트리거 될 때와 JS를 실행할 때 사용

v-on:click="methodName" 줄여서 @click="methodName" 으로 사용

 

메소드 이벤트 핸들러

 

<div id="event-with-method">
  <!-- `greet`는 메소드 이름으로 아래에 정의되어 있습니다 -->
  <button @click="greet">Greet</button>
</div>

Vue.createApp({
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    greet(event) {
      // 메소드 안에서 사용하는 `this` 는 Vue 인스턴스를 가리킵니다.
      alert('Hello ' + this.name + '!')
      // `event` 는 네이티브 DOM 이벤트입니다
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
}).mount('#event-with-method')

 

- 클릭이라는 이벤트가 발생했을때 실행할 함수를 이벤트 핸들러라고 부름

 

인라인 메소드 핸들러

 

- 메소드 이름을 직접 바인딩 하는 대신에, 인라인 JavaScript 구문에 메소드를 사용

- 원본 DOM 이벤트에 엑세스 할 수 있는 특별한 $event 를 사용해 메소드에 전달 가능

 

<div id="inline-handler">
  <button @click="say('hi')">Say hi</button>
  <button @click="say('what')">Say what</button>
</div>

Vue.createApp({
  methods: {
    say(message) {
      alert(message)
    }
  }
}).mount('#inline-handler')

 

복잡한 이벤트 핸들러

 

- 소괄호() 생략 불가능

- 연산자를 사용하여 이벤트 핸들러 안에서 복합 메소드 지정 가능

 

<!-- one()과 two() 둘다 버튼 클릭 이벤트를 실행할 수 있습니다.-->
<button @click="one($event), two($event)">
  Submit
</button>

// ...
methods: {
  one(event) {
    // 첫번째 핸들러 로직...
  },
  two(event) {
    // 두번째 핸들러 로직...
  }
}