-
[Vue.js] 기본 문법 (v-on 이벤트리스너)Front-End/Vue.js 2022. 11. 13. 12:11
이전엔 data를 이용해서 값을 적용할 수 있는 v-bind, v-once, v-html에 대해 정리해봤다. 이번 포스팅에선 이벤트와 관련된 v-on 디렉티브에 대해 정리해보려고 한다.
📑 이벤트 리스너, v-on
v-on은 이벤트 리스너의 역할을 한다.
이벤트 리스너란? 예를들어 사용자가 로그인 페이지에 접속할 때, 아이디와 패스워드를 입력하고 로그인 버튼을 클릭하는 순간 로그인이 된다.
여기서 로그인 버튼은 자신이 클릭되는 순간에 로그인 이벤트를 실행시키게 된다. 바로 여기서 이벤트를 실행하기 위한 트리거( 여기서는 로그인 버튼 클릭)와 이벤트를 연결해주는 것을 이벤트 리스터라고 한다.
📌 주사위 던지기 예제
주사위 던지기로 이벤트 리스너에 대해 더 알아보겠다. 로직은 아래와 같이 작성한다.
1. 주사위 수를 나타내는 값을 하나 정한다.
2. 주사위를 던졌을 때 1~6 사이의 랜덤한 숫자를 반환해야 한다.
위와 같은 로직을 vue에 적용해보자.
1. 주사위 수를 나타내는 값을 하나 정해 data에 선언해준다.
2. method 내에 1~6 사이의 랜덤한 숫자를 반환하여 data에 선언해준 값을 바꿔주는 함수를 생성한다.
2-2. 주사위를 던졌을 때 함수를 실행할 수 있도록 이벤트 리스너 v-on을 사용한다.<코드>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>주사위 던지기</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ number }} <!-- 주사위 수 --> <button v-on:click="randomNum()">주사위 던지기</button> </div> <script> new Vue({ el : '#app', data : { number : 0 }, methods : { randomNum : function(){ let num = Math.floor(Math.random()*(6)) +1; return this.number = num; } } }) </script> </body> </html>Vue 인스턴스에 data 객체에 주사위 숫자를 정할 num을 생성한다. 그리고 주사위를 던졌을 때 1~6 사이의 임의의 수를 생성하고 이 값을 data.number로 할당하여 randomNum()을 methods 객체 내에 생성한다.
v-on 디렉티브는 다음과 같은 구조를 가진다.
v-on : 이벤트 이름 = "method 이름"
지금 다루고 있는 예제에서는 click이라는 이벤트에 동작 하기를 원하기 때문에 <button v-on:click="randomNum()">주사위 던지기</button> 이와 같이 작성했다.
📑 v-on 함수에 인자값 받기
function(index){
console.log(index)
}만약 index라는 인자를 받는 함수처럼 JavaScript 함수가 인자를 받을 수 있다는 사실을 알고 있다. 이처럼 v-on 디렉티브를 통해 함수를 싱행시킬 때 함수 자체의 event object 뿐만 아니라 우리가 임의로 생성한 값도 인수로 받아 함수에 인자로 사용할 수 있다.
현재 저장되어 있는 값은 0인데 여기에 버튼을 클릭할 때마다 2를 더해주는 로직을 작성해보자.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{number}}</p> <button @click="plus(2)">버튼</button> </div> <script> new Vue({ el : '#app', data : { number : 0 }, methods : { plus : function(num){ this.number = this.number + num; } } }) </script> </body> </html><button @click="plus(2)">버튼</button> 의 plus()안에 인수로 숫자 2를 넣었기에 vue의 plus 함수에 2가 전달된다. 따라서 버튼을 클릭하면 값이 2씩 올라가는 것을 확인할 수 있다.
이벤트 리스너는 더블클릭이나 , 마우스 이동 등 원하는 이벤트 함수명을 입력하면 된다.
<button @dblclick="plus(2)">버튼</button>
<button @mouseover="plus(2)">버튼</button>참고 : [맨땅에 VueJS] 이벤트 리스너 v-on / VueJS Directive | by Hoza Cho | Medium
반응형'Front-End > Vue.js' 카테고리의 다른 글
[Vue.js] 양방향 데이터 바인딩 v-model (0) 2022.11.13 [Vue.js] 계산된 속성 computed vs methods (0) 2022.11.13 [Vue.js] 기본 문법 (v-once, v-html) (0) 2022.11.13 [Vue.js] 기본 문법, 디렉티브 사용 v-bind (0) 2022.11.13 [Vue.js] 개념과 기본문법 살펴보기 (data, method) (0) 2022.11.13