Vue:이벤트 핸들러

학교의 모든 지식. SMwiki
Sam (토론 | 기여)님의 2022년 7월 5일 (화) 13:31 판 (→‎개요)
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)
둘러보기로 이동 검색으로 이동

틀: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>
함수는 인스턴스 안에 정의해두어야 한다.