홈페이지 유튜브

v-on

Vue 이벤트 핸들링

VueJS에서는 v-on 디렉티브 또는 @ 디렉티브를 사용하여 이벤트 핸들링 설정을 할 수 있다.

<!-- v-on directive -->
<button v-on:click="testFunction">click</button>

<!-- @ directive -->
<button @click="testFunction">click</button>

디렉티브의 값으로는 javascript 또는 Vue 코드를 작성할 수 있지만 코드가 길어지면 가독성이 떨어지므로 일반적으로 Vue method를 호출하는 형태로 작성한다.

사용 예제 - click

<!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>

실행해보면 세 버튼 모두 다 동일한 결과가 나오는 것을 확인할 수 있다. 하지만 방식의 차이가 존재한다.

<button v-on:click="testFunction">호출 방식 1</button>

첫 번째 방식은 메소드명을 지정하여 Vue에게 실행을 위임하는 방식이다. 이 경우 이벤트 발생 정보를 Vue에서 첫 번째 매개변수로 설정해주므로 testFunction에서 선언하여 사용할 수 있다. arguments 의 0번 데이터를 살펴보면 이벤트 정보가 들어간 것을 확인할 수 있다. 하지만 이 방식의 경우 매개변수가 필요한 메소드를 실행하며 데이터를 인자로 전달할 수 없다. 

<button v-on:click="testFunction()">호출 방식 2</button>

두 번째 방식은 메소드를 직접 실행하는 방식이다. 이 경우 이벤트 발생 정보를 직접 설정해줘야 하는데, 설정한 내용이 없기 때문에 이 방식으로 호출한 경우 메소드 내부에서는 발생한 이벤트 정보를 확인할 수 없다. 대신 데이터를 인자로 전달할 수 있다. 

<button v-on:click="testFunction($event)">호출 방식 3</button>

세 번째 방식은 메소드를 직접 실행하며 이벤트 정보를 설정하는 방식이다. 첫 번째 방식과 두 번째 방식을 모두 해결할 수 있는 방법으로 Vue 내장 이벤트 객체인 $event를 매개변수로 전달하고, 다른 데이터들도 뒤에 작성하여 인자로 전달할 수 있다.

사용 예제 - input

input 이벤트는 입력 발생을 감지한다. v-model 연동으로도 입력에 따른 값의 변화를 관리할 수 있지만 이 부분에 대한 차이는 다음의 예제로 확인할 수 있다.

<!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 입력이 발생하는 경우도 감지가 가능하다.

pageIME issue

사용 예제 - keyup(특정 키만 감지)

input 이벤트를 통해 특정 키 입력만 감지하도록 설정할 수 있다. 만약 Enter의 입력만 감지하고 싶을 경우 다음과 같이 작성한다.

<input type="text" v-on:keyup.enter="testFunction">

완성된 예제 코드는 다음과 같다.

<!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이 실행된다.

Previousv-bind classNextonce

Last updated