[Vue.js] 이벤트 핸들러

Vue.js 이벤트 핸들러는

Javascript기준으로 얘기하자면 button.addEventListener("click") 이것과 같다.

즉, HTML요소에서 발생하는 이벤트에 대한 로직을 처리해주는 것이다. 주로 애플리케이션내에서 사용자 인터렉션 및 다른 이벤트와 상호작용하기위해 자주 활용 된다.

 

이벤트 핸들러 예시

1. "v-on" 디렉티브

<template>
	<button v-on:click="handleEvent">이벤트발생</button>
</template>

export default {
  data() {
    return {
      
    };
  },
  
  methods: {
    handleEvent() {
    	console.log("클릭 이벤트 발생");
    }
  }
};

 

2. "@이벤트명" 디렉티브

<template>
	<button @click="handleEvent">이벤트발생</button>
</template>

export default {
  data() {
    return {
      
    };
  },
  
  methods: {
    handleEvent() {
    	console.log("클릭 이벤트 발생");
    }
  }
};

 

 

위의 예시는 click 이벤트 기준으로만 예시가 되어있지만 "@dblclick", "@input", "@mouseover", "@keydown" 등 자바스크립트에서 사용이 가능한 모든 이벤트를 vue 디렉티브 키워드를 사용하면 핸들링 할 수 있다.