이벤트 핸들링
이번 포스팅에서는 v-on
디렉티브를 이용하여 간단한 키보드 이벤트 핸들링과 마우스 이벤트 핸들링을 다뤄볼게요. javascript를 해보셨던 분은 아시겠지만 이벤트가 엄청 많아서 이벤트와 관련된 자세한 부분은 구글링을 해보시고 저는 어떤 식으로 vue에서 event handling을 구현하는가에 초점을 둘게요.
v-on 디렉티브
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
</head>
<body>
<div id="example">
<p><input type="text" v-model="damage"></p>
<p>
<button id="attack" v-on:click="attack">피깎기</button>
<button id="heal" v-on:click="heal">피회복시키기</button>
</p>
<h4>남은 피 : {{ hp }}</h4>
</div>
<script>
var test = new Vue({
el: "#example",
data: {
damage: 0,
hp: 0
},
methods: {
attack: function(e){
var dmg = parseInt(this.damage);
if(dmg<=0){
alert("0보다 큰 데미지만 줄 수 있습니다.");
}else {
this.hp -= dmg;
}
if( this.hp < 0){
this.hp = 0;
alert("더 이상 피해를 줄 수 없습니다.");
}
},
heal: function(e){
var hl = parseInt(this.damage);
if(hl<=0){
alert("0보다 작게 힐을 할 수는 없습니다.");
}else {
this.hp += hl;
}
}
}
})
</script>
</body>
</html>
공격과 힐을 통해서 hp를 올리고 줄이는 아주 허접한 예제에요. 0인 경우에는 더 이상 피를 깎을 수 없게 예외처리 해주었구요.
기본적으로는 Angular에서 사용하는 (click)="메소드"
가 Vue에서는 v-on:click="메소드"
로 바뀌었네요. 사용하는 방법 자체는 매우 간단해요. v-on:click="메소드"
말 그대로 해당 태그가 클릭될 경우 메소드를 실행시키는 거죠. 단 주의할 점은 method 작성시 function의 파라미터를 e로 가져와야하는 거에요. e는 event 객체에 해당해요.
이벤트 객체는 여러 속성과 몇개의 메소드를 가지는데 이 e는 W3C 표준 HTML DOM Event모델을 따르기 때문에 자세한 사항은 W3C를 참고해보시는게 좋을 것 같아요.
v-on:contextmenu // 우클릭 제어
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
</head>
<body>
<div id="example">
<div v-on:contextmenu.prevent="ctxStop" style="border: 2px solid">
<h1>우클릭 안됨</h1>
</div>
<div style="border: 2px solid">
<h1>우클릭 됨</h1>
</div>
</div>
<script>
var test = new Vue({
el: "#example",
methods: {
ctxStop : function(e){
console.log("다른거");
}
}
})
</script>
</body>
</html>
웹개발을 하다보면 우클릭을 컨트롤하는 방법도 필요할 것 같아서 추가해봤어요. 우클릭을 할 경우 복사니 뭐니 뜨는 그창의 정식 명칭은 contextmenu
라고 해요. 지금은 v-on:contextmenu.prevent="ctxStop"
으로 일단 우클릭을 막고 ctxStop
이라는 메소드에서 우클릭을 눌렀을 경우를 만들어주면되요. 지금은 그냥 콘솔창에 "다른거"라고 출력만 하게 한 상태에요.
v-on:keyup // 키보드 핸들링
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<body>
<div id="example">
<p>
이름 : <input type="text" v-on:keyup.13="print">
</p>
<div>
{{ hello }}
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#example',
data: {
ck: "",
hello: ""
},
methods: {
check: function(test) {
this.hello = test;
},
print: function(e) {
this.check(e.target.value);
}
}
})
</script>
</body>
</html>
다음은 키보드 핸들링이에요. 위 에제는 심플하게 만들어봤어요. v-model
디렉티브를 이용해서 input
의 value
를 넘겨주면 실시간으로 바뀐다는 문제?가 생겨요. 일반적으로는 크게 문제가 없지만, 받은 value
값을 이용해서 서버와의 통신을 할 때는 쓸데 없는 트레픽이 많이 생기겠죠? 물론 그걸 해결하기 위해서 _.debounce
를 이용하기도 했는데요. 키보드 핸들링을 이용하면 훨씬 더 줄일 수 가 있어요. enter키를 입력할 때만 메소드가 호출되게끔 말이죠.
<input type="text" v-on:keyup.13="print">
가 핵심코드인데요. 여기서 keyup.13
이라는 것은 enter키가 눌려졌을 때를 말해요(각 키의 번호는 구글링을 통해 알아보세요.) .
먼저 print
라는 키보드 핸들링 메소드를 하나 만들어주세요. 그 안에서 e.target.value
로 받는 값이 저희가 입력한 값이 되거든요. 그러면 이제 그 값을 이용해 실제로 저희가 서버와 통신을 한다거나 뭐 이것저것 핸들링할 녀석에게 this.check(e.target.value)
이런 식으로 넘겨주면 되요. 전 check
라는 메소드를 만들어서 화면에 출력되게끔 만들어 보았어요.
마우스 클릭 핸들링 응용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
</head>
<body>
<div id="example" v-on:contextmenu.prevent="test" @mouseup.left="left" @mouseup.right="right"
style="width: 100%; height: 100vh;">
<img src="https://cdn0.iconfinder.com/data/icons/education-15/500/examination-256.png" alt=""
v-bind:style="{position:'absolute', left: pos.left + 'px', top:pos.top+'px'}"/>
</div>
<script>
var vm = new Vue({
el: "#example",
data : {
pos : { left: 100, top: 100}
},
methods: {
test: function(e) {},
left: function(e){
this.pos.left-=30;
},
right: function(e){
this.pos.left+=30;
}
}
})
</script>
</body>
</html>
좌클릭시 좌로이동하고 우클릭시 우로이동하는 예제애요. 크게 응용될 부분이 있을진 모르겠는데 @mousup.left
라는 표현식도 가르쳐드릴겸 재밌어서 만들어봤어요. v-on
디렉티브는 @
를 이용해서 줄여서도 사용이 가능해요. 다음 포스팅에서 다루겠지만 css 스타일도 v-bind
를 이용하면 즉각즉각 변경이 가능하게끔 할 수 있어요.
'Front_End > Vue.js' 카테고리의 다른 글
05. Vue.js Dynamic CSS 적용하기 (0) | 2018.12.14 |
---|---|
04. Vue.js 스타일 적용 방법 (0) | 2017.12.26 |
02. Vue.js Vue 인스턴스 옵션 and Life Cycle (0) | 2017.12.24 |
01. Vue.js 기본기: 각종 디렉티브 (0) | 2017.12.23 |
00. Vue.js 설치와 시작 (2) | 2017.12.22 |