[ VueJS 입문 ] 이벤트 리스너 v-on / VueJS Directive

• 이벤트 디렉티브 v-on - https://jsfiddle.net/sunghun/th2m9ws7/12/

v-on 디렉티브는 이벤트가 일어 났을 때 javascript를 실행 하는 디렉티브이다. 가장 대표적인 이벤트는 클릭 이벤트를 예로 든다면 사이트에 접속 후 아이디와 패스워드를 입력 후 로그인 버튼을 '클릭' 해야지 로그인이 되는 상황을 볼 수 있다. 이때 로그인 버튼은 자신이 클릭 되는 순간과 이벤트를 서로 연결하는 것이 "이벤트 리스너" 라고 한다.

v-on:이벤트명="methods 이름"

샘플은 주사위 던지기 입니다. 즉 '주사위 던지기' 라는 버튼을 클릭시 앞 숫자가 1~6으로 랜덤하게 표현되는 예제이다. 이때 해당 버튼에는 v-on:click="rollDick()" 을 넣어 클릭시 해당 함수가 실행되도록 하였다.

 

• 함수에 인자값 받기

function(index){console.log(index)}

위와 같이 index라는 인자를 받는 함수처럼 javascript에서 함수가 인자를 받을 수 있다. 이처럼 v-on 디렉티브를 통해 함수를 실행 시킬 때 함수 자체의 event object뿐 아니라 인수를 받아 함수의 인자로 사용 할 수 있다.

https://jsfiddle.net/sunghun/th2m9ws7/14/

샘플을 살펴보면 v-on:clink="addCount(2)"로 버튼에 디렉티브가 잡혀 있다. addCount()함수 안에 숫자 2의 인수가 들어 있고 이 인수는 함수 안에 number 인자로 변환되어 count와 더하도록 되어 있다. 그래서 클릭시 마다 인수 2가 해당 count에 계속 더해지는것을 확인 할 수 있다.