Vue에서 다양한 이벤트를 처리하는 방법들입니다.
JavaScript의 addEventListener처럼 무언가를 클릭할 때, 혹은 무언가가 변화할 때, 특정 키를 눌렀을 때 등의 상황에 따라 특정 명령을 실행하도록 지정할 수 있습니다.
1. 클릭 이벤트(v-on:click)
이벤트는 v-on:click="실행할코드" 과 같이 사용할 수 있으나, v-on을 줄여서 @click="실행할 코드"로 사용할 수 있습니다.
data에 있는 숫자를 증가시키는거 같은 간단한 내용은 바로 지정해줘도 되지만, 많은 이벤트 명령들은 실행할 내용을 script의 아래쪽에 methods로 정의한 후, 그 method를 호출하는 형태로 사용합니다.
<template>
<MainHeader />
<div v-for="(item, index) in post" :key="index" class="blogPost">
<p @click="callAlert">제목: {{ item.title }}</p>
// <-- 제목을 클릭하면 callAlert 라는 이름을 가진 함수가 실행. 함수는 script에 methods에 정으
<p>작성일: {{ item.date }}</p>
</div>
</template> methods: {
callAlert(){
alert("제목을 클릭했습니다"); // <-- callAlert 함수가 호출되면 제목을 클릭했다는 알림을 띄움
}
}
여러 개의 함수를 호출해야 한다면 다음과 같이 작성합니다.
<button type="button" @click="methodName1(), methodName2()">버튼</button>
method 작성시 주의사항
데이터를 가져다 쓸때는 항상 this. 을 붙여야 합니다.
<template>
<p> {{ count }}</p>
<button @click="plus">버튼</button>
</template>
<script>
(생략)
data() {
return {
count: 0,
}
},
methods: {
plus: function(){
this.count++ // <-- // methods 외에도 데이터를 가져와서 사용할때는 항상 this. 이 앞에 붙어야 합니다.
},
}
(생략)
</sciprt>
2. input 이벤트 (v-on:input)
@input 이벤트는 사용자가 input에 뭔가를 입력할 때 동작합니다.
동작 테스트를 해봅시다.
우선 data에 데이터를 하나 만들어줍니다.
<script>
export default {
data() {
return {
inputText: "",
}
}
}
</script>HTML 파트에는 아래와 같이 값을 입력할 input 태그 하나와 위에서 지정한 inputText값이 출력될 장소를 만들어 줍니다.
<template>
<input type="text" @input="inputText = $event.target.value" />
<h1>{{ inputText }}</h1>
</template>이렇게 해서 실행해보면 글을 입력할때마다 {{ inputText }} 값이 바로 출력되는 것을 확인할 수 있습니다.
@input="inputText = $event.target.value"
// 인풋이 발생하면 다음을 실행해라.
// inputText값은 = 현재 입력한 값($event.target.value)을 대입해라
* $event.target은 JavaScript에서 e.target 형식으로 쓴것과 동일하다 생각하면 됨.
Vue에서 지원하는 특별한 변수
위에서 언급한 긴 내용이 사실 v-model을 이용해 아래와 같이 작성해도 동일하게 작동합니다만...
이번 글은 이벤트 핸들링 관련된 내용이니 이런게 있구나 정도만 알고 넘어가면 될 거 같습니다.
<input type="text" v-model="inputText" />
3. change 이벤트 (v-on:change)
input과 사용방법이 동일하나, 주로 select 태그에서 많이 사용합니다.
<template>
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<h1>선택한값: {{ selected }}</h1>
</template>
<script>
export default {
data() {
return {
selected: ''
};
}
}
</script>
4. Key 이벤트 (v-on:keyup)
Vue에서는 키보드 이벤트를 매우 쉽게 처리할 수 있습니다.
<input @keyup.enter="submit" /> // <-- 엔터키가 입력되면 sub함수를 호출
Vue에서 많이 사용되는 키 명령어
• .enter
• .tab
• .delete (“Delete” 와 “Backspace” 키 모두를 캡처합니다)
• .esc
• .space
• .up
• .down
• .left
• .right
시스템 수식어 키 목록
해당 키가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너가 작동합니다.
• .ctrl
• .alt
• .shift
• .meta (window에서는 윈도우키 (⊞), mac에서는 command key(⌘))
<!-- 알트 + 엔터 -->
<input @keyup.alt.enter="clear" />
<!-- 컨트롤 + 클릭 -->
<div @click.ctrl="doSomething">Do something</div>
.exact 수식어
.exact 수식어는 다른 시스템 수식어와 조합해 그 핸들러가 실행되기 위해 정확한 조합이 눌러야 하는 것을 요구합니다.
<!-- 아래코드는 Alt 또는 Shift와 함께 눌렀을 때도 실행됩니다.-->
<button @click.ctrl="onClick">A</button>
<!-- 아래코드는 Ctrl키만 눌려져 있을 때 실행됩니다.-->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 아래 코드는 시스템 키가 눌리지 않은 상태인 경우에만 작동합니다.-->
<button @click.exact="onClick">A</button>
마우스 버튼 수식어
• .left
• .right
• .middle