VueJS - 6. 이벤트 리스너 v-on / VueJS Directive

아래 글을 따라하며 VueJS에 적응하기

 

https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90-vuejs-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A6%AC%EC%8A%A4%EB%84%88-v-on-vuejs-directive-625bfc661c75

[맨땅에 VueJS] 이벤트 리스너 v-on / VueJS Directive

 

요약

<v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다. — VueJS 공식 문서>

이벤트 핸들링 — Vue.js

 

<button v-on:click="rollDice">주사위 던지기</button>

주사위 던지기 버튼을 클릭하는 순간 rollDice 함수가 호출된다.

 

<함수에 인자값 받기>

함수에 인자를 받아 이를 함수에서 사용할 수 있다.

<Double Click>

더블 클릭을 하면 콘솔에 출력하기

 

<Mouse Move>

마우스가 해당 위치(태그)에 올라간 상태에서 움직일때의 이벤트를 트리거로 하여 함수를 실행

 

<Event Modifier>

Event 동작에 대해 세부 이벤트 수식어를 사용할 수 있다.

<span v-on:mousemove.stop="">그만!</span>

 - 해당 부분에서는 mousemove 이벤트 동작을 하지 않는다.

 

<Key Event>

키보드 동작에 따라 함수를 실행하기

v-on:keyup.enter(키값)=”함수이름”

 - 엔트 입력 시 함수 실행