Vue에서 이벤트 핸들러 등록하기

이제 어떤 이벤트에 따라 우리의 메소드를 실행해 보겠습니다. 어떤 DOM 요소에 이벤트를 등록하려면, 디렉티브 v-on를 사용해야 합니다.

이 디렉티브에서 콜론 뒤에는 이벤트 이름을 지정하고, 값으로는 해당 이벤트 발생 시 호출할 메소드의 이름을 지정해야 합니다.

실제로 한번 해봅시다. 다음과 같은 메소드가 있다고 가정해 보겠습니다:

methods: {
	show: function() {
		alert('!');
	}
}

다음과 같은 버튼이 있다고 가정해 보겠습니다:

<template>
	<button>text</button>
</template>

이 버튼을 클릭했을 때 show 메소드가 호출되도록 만들어 보겠습니다:

<template>
	<button v-on:click="show">text</button>
</template>

보통은 v-on의 축약형을 사용합니다. 이것은 이벤트 이름 앞에 @ 기호를 붙이는 형태입니다:

<template>
	<button @click="show">text</button>
</template>

클릭하면 alert를 통해 현재 날짜가 표시되는 버튼을 만드세요.

이전 작업을 수정하여 alert가 클릭 시가 아니라 마우스 오버 시에 표시되도록 하세요.