Vue 이벤트와 methods 사용하기

Vue에서 이벤트를 등록해서 사용하고 methods를 이용해서 함수를 호출할 수 있습니다.

 

이벤트 등록 하기

이벤트는 일반적으로 v-on을 앞에 붙이지만 줄여서 @를 사용합니다.

inline-code를 이용해서 이벤트에서 실행될 로직을 작성할 수 있고 메서드를 사용해서 작성할 수 있습니다.

간단한 로직의 경우에는 인라인 코드를 이용해서 사용하고,

복잡한 로직의 경우에는 메서드로 따로 빼서 처리하시면 됩니다.

<button v-on:click="count++">button</button> // 인라인 코드

<button @:click="clickHandler">button</button> // 메서드

메서드 methods

메서드는 vue 인스턴스에서 사용할 메서드를 등록해서 사용할 수 있습니다.

아래와 같이 메서드 등록 후 사용할 수 있습니다.

 

기본적으로 이벤트에서 method 호출 시에 event 관련 파라미터가 기본적으로 전달됩니다.

해당 변수를 이용해서 event 관련 정보를 알 수 있습니다.

const App = {
  methods: {
    clickHandler: (event) => {
      alert('click');
    }
  }
}

버튼 클릭이벤트 예시

See the Pen vue event by powerku (@powerku) on CodePen.