Vue에서 event handling은 v-on 또는 @를 이용해서 event를 바인딩 한다.
** @는 v-on의 축약형
<button v-on:click="func">버튼</button><button @click="func">버튼</button>
event handling을 이용해 카운팅 하는 간단한 코드를 구현해보면 아래와 같다. event는 methods 객체 안에 구현해주면 된다.
<body>
<div id="root">
<button v-on:click="increase">+</button>
<button @click="decrease">-</button>
<br />
카운팅 : {{ count }}
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#root',
data() {
return {
count: 0
}
},
methods: {
increase() {
this.count = this.count + 1
},
decrease() {cc
this.count = this.count - 1
}
}
})
</script>
</body>상태에 count를 만들어 주고 methods 안에 increase와 decrease를 구현했고 그 안에서는 this를 이용해 상태값 중 하나인 count의 접근해 상태를 변경해주고 있다.
다음으로 엔터키 를 입력 했을 때 값을 화면에 보여주는 코드를 작성해보자.
<body>
<div id="root">
<button v-on:click="increase">+</button>
<button @click="decrease">-</button>
<br />
카운팅 : {{ count }}
<div>
<input type="text" @keyup="handleKeyUp" />
결과 : {{ todo }}
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#root',
data() {
return {
count: 0,
todo: ''
}
},
methods: {
increase() {
this.count = this.count + 1
},
decrease() {
cc
this.count = this.count - 1
},
handleKeyUp(e) {
if (e.keyCode === 13) {
this.todo = e.target.value
}
}
}
})
</script>
</body>
기존 코드에서 input 부분과 todo 라는 상태 handleKeyUp 이라는 메소드가 추가되었다.
input 에서는 keyup 이벤트를 바인딩하고 있고, handleKeyUp에서는 엔터키일 때만 처리하는 로직이 들어 있다.
Vue에서는 특정키가 들어갔을 때 이벤트가 발생하도록 지원하고 있다. @keyup 부분을 @keyup.enter 로 수정하고 handleKeyUp 부분의 엔터키를 확인하는 로직을 지워도 동일한 결과를 출력한다.
자세한 내용은 아래
https://kr.vuejs.org/v2/guide/events.html
이벤트 핸들링 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
이곳에서 이벤트 수식어 / 키 수식어 부분을 확인하자.
'Vue > Tutorial' 카테고리의 다른 글
| [Vue - tutorial] Component (0) | 2019.09.04 |
|---|---|
| [Vue - tutorial] 배열 변경 감지 (0) | 2019.09.04 |
| [Vue - tutorial] attribute binding (0) | 2019.09.03 |
| [Vue - tutorial] 리스트 출력하기 (0) | 2019.09.03 |
| [Vue - tutorial] Vue devtools (0) | 2019.09.03 |
