Vue:이벤트 핸들러

틀:Vue

1. Vue:개요
   1. Vue:설치 및 개발환경 세팅
   2. Vue:프로젝트 생성 및 시작해보기
2. Vue:문법
   1. Vue:데이터바인딩
   2. Vue:반복문
   3. Vue:조건문
   4. Vue:함수
3. Vue:이벤트
   1. Vue:이벤트 핸들러

개요

어떤 요소를 클릭하면 작동하게 만드는 기능.

자바스크립트에선 주로 onclick 속성을 사용한다.

Vue에선 v-on: 뒤에 특정 이벤트를 지정하는데, 이를 축약하여 @ 뒤에 특정 이벤트를 지정하여 작동하게 하기도 한다. 자바스크립트에 비해 간단해 좋다.

사용예

의도	코드	설명
클릭	<a @click="변화 += 1">버튼 {{ 변화 }}</a>	클릭하면 '변화'값을 1 늘린다. ++문법 등 자주 쓰는 것들을 사용할 수 있다.
마우스오버	<a @mouseover="변화 += 1">버튼 {{ 변화 }}</a>	마우스를 올리면 작동한다.

함수 사용

의도	코드	설명
코드를 정리하기 위해 함수 사용	<a @click="함수이름">버튼 {{ 변화 }}</a>	함수는 인스턴스 안에 정의해두어야 한다.