728x90
JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
참고:
지금까지 이벤트를 계속 해왔으니 이벤트에 대해서 세삼 놀랄것도 없다.
그러나 지금 까지 여러분이 사용했던 이벤트는 수박 겉햝기 식으로 알려준 것이다.
이제 이 이벤트에 대해서 더욱 자세히 알아보도록 하자.
이때까지 우리가 마우스 클릭이벤트를 자주 했었다.
우클릭 이벤트를 한번 만들어보자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:mousedown="rightClick">rightClick</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5, 5]
},
methods: {
rightClick:function (e) {
if(e.button==2)
console.log(e);
}
}
});
</script>
</html>
우클릭을 사용하기 위해서 mousedown이벤트를 만들었다.
물론 실제로 클릭이벤트를 구현하기위해서는 mousedown보단 mouseup이 낫다.
처음 보는 개념이 보일것이다. 바로 v-on이다.
v-on은 모든 이벤트를 캐치할 수있다. 여러분이 자바스크립트에서 사용한 이벤트와 대응된다.
목록을 여기서 일일히 나열하진 않겠다.
w3cschool에 사용가능한 목록이 있으니 참조하라.
그러나 여러분은 v-on이라는 것을 처음 봤을 것이다.
그렇다... 뭐 감추려던것도 아니고 딱히 놀라운 이야기도 아니지만 다시 설명하자면
v-on은 하도 많이 쓰다보니 @로 대체할 수 있다.
즉 아래와 같이 사용할 수 있다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<button @mousedown="rightClick">rightClick</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5, 5]
},
methods: {
rightClick:function (e) {
if(e.button==2)
console.log(e);
}
}
});
</script>
</html>
이렇게 사용해도 위와 아래는 똑같다.
이 말이 뭘 의미할까? 모든 v-on은 @로 대체가능하다는 사실이다.
그럼 on말고 이벤트는 없을까?
없다. 즉 모든 이벤트는 @로 대체가능하다...
이벤트에 대해서는 짧게 하도록 하겠다.
왜냐하면 이벤트는 한번에 하기는 약간 양이 많기 때문이다.
다음 강의를 참조하라.
'Programming > JavaScript-Vue' 카테고리의 다른 글
| [Vue-10]컴포넌트 (0) | 2018.03.13 |
|---|---|
| [Vue-09]이벤트 수식어 (0) | 2018.02.23 |
| [Vue-07]배열(Array) 및 연관배열(Object) 사용시 주의 사항 (2) | 2018.02.20 |
| [Vue-06]반복문(v-for) (0) | 2018.02.20 |
| [Vue-05]조건문 (0) | 2018.02.20 |