Vue:이벤트 핸들러
개요
어떤 요소를 클릭하면 작동하게 만드는 기능.
자바스크립트에선 주로 onclick 속성을 사용한다.
Vue에선 v-on: 뒤에 특정 이벤트를 지정하는데, 이를 축약하여 @ 뒤에 특정 이벤트를 지정하여 작동하게 하기도 한다. 자바스크립트에 비해 간단해 좋다.
사용예
| 의도 | 코드 | 설명 |
|---|---|---|
| 클릭 | <a @click="변화 += 1">버튼 {{ 변화 }}</a>
|
클릭하면 '변화'값을 1 늘린다. ++문법 등 자주 쓰는 것들을 사용할 수 있다. |
| 마우스오버 | <a @mouseover="변화 += 1">버튼 {{ 변화 }}</a>
|
마우스를 올리면 작동한다. |
함수 사용
| 의도 | 코드 | 설명 |
|---|---|---|
| 코드를 정리하기 위해 함수 사용 | <a @click="함수이름">버튼 {{ 변화 }}</a>
|
함수는 인스턴스 안에 정의해두어야 한다. |