이벤트 핸들링 | Vue.js

이벤트 리스닝하기

→ 일반적으로 v-on 디렉티브는 단축 문법으로 @ 문법을 사용하고, DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행할 수 있다.

• v-on:click="handler" 또는, @click="handler" 로 사용한다.

핸들러 값은 다음 중 하나일 수 있다.

1. 인라인 핸들러 : 이벤트가 트리거될 때 실행되는 인라인 JavaScript
2. 메서드 핸들러 : 컴포넌트에 정의된 메서드 이름, 또는 메서드를 가리키는 경로

인라인 핸들러

→ 인라인 핸들러는 일반적으로 간단한 경우에 사용된다.

const count = ref(0)

<button @click="count++">1 추가</button>
<p>숫자 값은: {{ count }}</p>

메서드 핸들러

→ v-on 은 컴포넌트 메서드 이름이나, 메서드를 가리키는 경로를 실행할 수 있게 구현되어 있다.