참조된 서적 : Vue.js 코딩 공작소 (길벗) - 사진은 생략, 앞에 보셨으니 다들 아실겁니다.
1. HTML에 이벤트 바인딩 (이벤트 발생)
이번 강의는 이벤트를 발생시키는 것인데, 일반적인 javascript 에서는 주로 onClick="function()" 을 사용하게 됩니다.
VueJS에서는 Vue 문법을 따라해야하는데, 2가지 방법이 있습니다. 편한 방법으로 정해서 통일시켜서 사용하면 됩니다.
v-on:click="function" 또는 @click="function" 으로 사용할 수 있습니다. 다시 말하면, v-on 을 @로 작성할 수 있다고 보면 됩니다.
- EventBinding.html
<html>
<head>
<title>dev-box Tistory, 개발자 보물상자</title>
<script src="https://unpkg.com/vue"></script>
<style>
.item {
border: 1px black solid;
}
</style>
</head>
<body>
<div id="dev-box">
<h1>dev-box tistory</h1>
<div class="item">
<h3 v-text="product.title" v-on:mousedown="mouseDown"></h3>
<input type="text" v-on:keyup="keyDown">
<button v-on:click="addCart">장바구니 담기</button>
</div>
</div>
<script src="./04.eventBinding.js"></script>
</body>
</html>v-on 에 가능한 이벤트들은 위 예제에서 사용하고 있는 mousedown, keyup, click를 포함한 Javascript에서 사용가능한 모든 이벤트를 여기서도 동일하게 사용할 수 있습니다.
h3 태그에 제목이 나오는 곳을 마우스를 누를 때 mouseDown 함수가 실행되고,
input 태그에 글자를 입력하기 위해 키보드를 누르는 순간에 keyDown 함수가 실행되고,
button 태그를 클릭할 때 addCart 함수가 실행됩니다.
- EventBinding.js
var websotre = new Vue({
el: '#dev-box',
data: {
sitename: "dev-box Tistory, 개발자 보물상자",
product: {
id: 1001,
title: "VueJS 강의입니다."
},
cart: []
},
methods: {
addCart: function(){
this.cart.push(this.product.id);
console.log(this.cart);
},
mouseDown: function(){
alert("Mouse Click : Down");
},
keyDown: function(e){
console.log("key : " +e.key);
console.log("code : " +e.keyCode);
}
}
});우리가 클릭 혹은 키보드를 누르는 이벤트를 가지고 예를 들었습니다. HTML에 있는 함수를 가지고 Javascript를 확인해봅니다. 아래쪽에 보이는 methods 에 들어가는 함수들이 HTML 에서 실행될 수 있는 함수 목록입니다. 단, 여기서 주의할 점은 methods에 선언된 함수들은 #dev-box 라는 영역 안에서 실행되는 이벤트에만 적용됩니다.
addCart 함수 실행은 HTML에서 버튼을 클릭할 때 였는데, 버튼을 클릭하면 클릭한 현재 요소의 정보를 cart 라는 배열에 저장하고, cart 배열에 담겨진 내용을 보여줍니다.
mouseDown 함수 실행은 HTML에서 h태그에 마우스를 누를 때 였는데, 마우스를 클릭할 때 팝업창이 나타납니다.
keyDown 함수 실행은 HTML에서 text form 에 키보드를 누를 때 였는데, 어떤 키를 눌렀는지와 그에 맞는 키코드를 보여줍니다.
- 결과
'프론트앤드 > VueJS' 카테고리의 다른 글
| [Vue.js] VueJS 코딩 공작소 (길벗) 책 리뷰 #중간후기 (0) | 2020.09.14 |
|---|---|
| [Vue.js] VueJS 강의 #3 - HTML 바인딩과 필터 (0) | 2020.09.07 |
| [Vue.js] VueJS 강의 #2 - 생명주기 훅 (0) | 2020.08.27 |
| [Vue.js] VueJS 강의 #1 - 모델 패턴과 반응형 웹 (0) | 2020.08.24 |
