Vue 이벤트 핸들링
VueJS에서는 v-on 디렉티브 또는 @ 디렉티브를 사용하여 이벤트 핸들링 설정을 할 수 있다.
Copy <!-- v-on directive -->
<button v-on:click="testFunction">click</button>
<!-- @ directive -->
<button @click="testFunction">click</button> 디렉티브의 값으로는 javascript 또는 Vue 코드를 작성할 수 있지만 코드가 길어지면 가독성이 떨어지므로 일반적으로 Vue method를 호출하는 형태로 작성한다.
사용 예제 - click
Copy <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue event</title>
</head>
<body>
<div id="app">
<button v-on:click="testFunction">호출 방식 1</button>
<button v-on:click="testFunction()">호출 방식 2</button>
<button v-on:click="testFunction($event)">호출 방식 3</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
methods: {
testFunction() {
console.log(arguments, arguments.length);
window.alert("testFunction 실행");
}
}
});
app.mount("#app");
</script>
</body>
</html> 실행해보면 세 버튼 모두 다 동일한 결과가 나오는 것을 확인할 수 있다. 하지만 방식의 차이가 존재한다.
Copy <button v-on:click="testFunction">호출 방식 1</button> 첫 번째 방식은 메소드명을 지정하여 Vue에게 실행을 위임하는 방식이다. 이 경우 이벤트 발생 정보를 Vue에서 첫 번째 매개변수로 설정해주므로 testFunction에서 선언하여 사용할 수 있다. arguments 의 0번 데이터를 살펴보면 이벤트 정보가 들어간 것을 확인할 수 있다. 하지만 이 방식의 경우 매개변수가 필요한 메소드를 실행하며 데이터를 인자로 전달할 수 없다.
Copy <button v-on:click="testFunction()">호출 방식 2</button> 두 번째 방식은 메소드를 직접 실행하는 방식이다. 이 경우 이벤트 발생 정보를 직접 설정해줘야 하는데, 설정한 내용이 없기 때문에 이 방식으로 호출한 경우 메소드 내부에서는 발생한 이벤트 정보를 확인할 수 없다. 대신 데이터를 인자로 전달할 수 있다.
Copy <button v-on:click="testFunction($event)">호출 방식 3</button> 세 번째 방식은 메소드를 직접 실행하며 이벤트 정보를 설정하는 방식이다. 첫 번째 방식과 두 번째 방식을 모두 해결할 수 있는 방법으로 Vue 내장 이벤트 객체인 $event를 매개변수로 전달하고, 다른 데이터들도 뒤에 작성하여 인자로 전달할 수 있다.
사용 예제 - input
input 이벤트는 입력 발생을 감지한다. v-model 연동으로도 입력에 따른 값의 변화를 관리할 수 있지만 이 부분에 대한 차이는 다음의 예제로 확인할 수 있다.
Copy <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue event</title>
<style>
.result {
height: 50px;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="data1" v-on:input="data2 = $event.target.value">
<h1>v-model</h1>
<div class="result" v-text="data1"></div>
<h1>v-on:input</h1>
<div class="result" v-text="data2"></div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data(){
return {
data1:"",
data2:"",
};
},
});
app.mount("#app");
</script>
</body>
</html> v-on:input은 v-model연동과 다르게 IME 입력이 발생하는 경우도 감지가 가능하다.
사용 예제 - keyup(특정 키만 감지)
input 이벤트를 통해 특정 키 입력만 감지하도록 설정할 수 있다. 만약 Enter의 입력만 감지하고 싶을 경우 다음과 같이 작성한다.
Copy <input type="text" v-on:keyup.enter="testFunction"> 완성된 예제 코드는 다음과 같다.
Copy <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue event</title>
<style>
.result {
height: 50px;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="text" v-on:keyup.enter="testFunction">
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data(){
return {
text:"",
};
},
methods:{
testFunction(){
window.alert("testFunction 실행");
},
},
});
app.mount("#app");
</script>
</body>
</html> 실행하면 엔터를 입력한 경우에만 이벤트 설정된 testFunction이 실행된다.
