실전 코드로 배우는 Vue.js

73

CHAPTER 02

Vue의 기본 작동 방식

2.122.12

vv

--

onon

을 이용한 이벤트 리스너 추가을 이용한 이벤트 리스너 추가

DOM

이벤트를

리스너

linstener

에 바인딩하려면

Vue

의 내장 디렉티브인

v

-

on

또는 축약형

@

문자를 엘리먼트 태그에 적용한다.

v

-

on

디렉티브는 다음과 같은 타입의 값을 지정한다.

●

인라인 자바스크립트 구문이 담긴 문자열 형식

●

컴포넌트 옵션의

methods

프로퍼티에 정의된 컴포넌트 메서드명

v

-

on

은 다음과 같은 형식으로 사용한다.

v-on:<event>= "<inline JavaScript code / name of method>"

또는 다음과 같이 축약형인

@

문자를 사용한다.

@<event>="<inline JavaScript code / name of method>"

NOTE

앞으로 본문에서

v-on

사용 방식은

@

로 통일한다.

이 디렉티브는 다음과 같이 엘리먼트에 직접 속성으로 추가한다.

<button @click= "printMsg='Button is clicked!'">

Click me

</button>

복잡한 코드베이스에서 코드 가독성을 고려한다면, 자바스크립트 표현식은 컴포넌트 메서드

내부에 유지하고 디렉티브에는 [예제

2

-

7

]과 같이 메서드명만 전달하는 것이 좋다.

74

실전 코드로 배우는 Vue.js ...