홍준혁

Vue.js-이벤트 본문

Vue.js

Vue.js-이벤트

홍준혁 [Hong-JunHyeok] 2020. 9. 14. 13:45
728x90

이번에 배워볼 것은 이벤트를 배워 볼 것이다.

이벤트라는 것은 어떠한 동작이 수행되었을 때 그 동작 자체를 이벤트라고 생각하면 될 것이다.

즉 이벤트가 감지되었을 때 특정 동작을 수행해라.라고 이해하면 될 것이다.

 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button v-on:click="count += 1">ADD</button>
            <button v-on:click="count -= 1">SUB</button>
            <h1>현제 count의 값은 {{ count }}</h1>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    count: 0,
                },
            });
        </script>
    </body>
</html>

 

간단한 이벤트를 사용한 예제이다. v-on:이라는 것을 사용했는데 기존에 HTML에서 onclick을 사용하면 JS코드가 실행이 되는 방식이었는데 Vue는 v-on:click이라는 문법을 사용해서 Vue에서 바인딩을 하는 방식을 사용한다.

 

그래서

<button v-on:click="count += 1">ADD</button>

위 코드를 보면 이 버튼에서 클릭이 감지되었을 시에 count += 1을 실행한다는 것이다. 이때 count의 값은 Vue에 선언되어있는 data에 count값을 의미한다.

 

하지만 위에 코드는 내용이 많아질수록 비효율적인 코드가 된다. 

유지보수가 쉽게 코딩되기 위해서는 함수를 사용해서 하는 것이 효율적이다.

 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button v-on:click="add()">ADD</button>
            <button v-on:click="sub()">SUB</button>
            <h1>현제 count의 값은 {{ count }}</h1>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    count: 0,
                },
                methods: {
                    add() {
                        return (this.count += 1);
                    },
                    sub() {
                        return (this.count -= 1);
                    },
                },
            });
        </script>
    </body>
</html>

 

지금 당장은 코드가 길어보이지만 로직이 복잡해질수록 함수형 코드가 더 빛을 발할 것이다.

메서드 안에서 사용하는 `this` 는 Vue 인스턴스를 가리킨다.

 

또한 event를 인자 값으로 받아와서 event를 사용하는 방법이 있는데 ,

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button v-on:click="add">ADD</button>
            <button v-on:click="sub">SUB</button>
            <h1>현제 count의 값은 {{ count }}</h1>
            <div>
                <button v-on:click="greet">greet</button>
            </div>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    count: 0,
                    name: "Vue.js",
                },
                methods: {
                    add() {
                        return (this.count += 1);
                    },
                    sub() {
                        return (this.count -= 1);
                    },
                    greet: function (event) {
                        // 메소드 안에서 사용하는 `this` 는 Vue 인스턴스를 가리킵니다
                        alert("Hello " + this.name + "!");
                        // `event` 는 네이티브 DOM 이벤트입니다
                        if (event) {
                            alert(event.target.tagName);
                        }
                    },
                },
            });
        </script>
    </body>
</html>

 

이렇게 greet라는 함수를 실행시키고 alert 한 다음에  event를 받고 그 이벤트의 target.tagName을 출력하는 코드인데,

event라는 것은 네이티브 DOM 이벤트인데 이 event를 사용해서 다양한 로직을 작성할 수 있다.

 

여기서 form에서 이벤트를 사용한 예제를 보면 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <form v-on:submit="alertSubmit">
                <input type="text" />
                <button type="submit">제출</button>
            </form>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {},
                methods: {
                    alertSubmit() {
                        alert("submited...");
                    },
                },
            });
        </script>
    </body>
</html>

 

submit을 하면 alertSubmit이 실행되면서 submited... 가 출력된 다음에 form의 특성상 리로드(새로고침)를 하게 되는데 

그럼 만약에 alertSubmit밑에 console.log("Hello");를 추가하게 된다면 콘솔에 나타났다가 매우 빠르게 리로드 되니까 거의 보이지 않게 된다. 이럴 경우에 사용하는 Vue.js기능이 있는데.

Vue공식문서에 있는 내용이다.

여러 가지 수식어가 있는데 그중에

Vue.js 공식문서이다.

prevent를 사용하게 되면 제출 이벤트가 페이지를 다시 로드하지 않는다고 한다. 즉 아까 작성한 코드에서. prevent를 수식하게 되면 더 이상 console.log("Hello")가 잠깐 나타났다가 없어지지 않을 것이다.

 

그렇게 완성된 코드를 보면

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <form v-on:submit.prevent="alertSubmit">
                <input type="text" />
                <button type="submit">제출</button>
            </form>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {},
                methods: {
                    alertSubmit() {
                        alert("submited...");
                        console.log("Hello");
                    },
                },
            });
        </script>
    </body>
</html>

 

이런 코드가 된다. 실제로 실행시켜보면 새로고침이 되지 않고 console창에 Hello가 그대로 남아있는 모습을 볼 수 있다.

 

또, 키 수식어라는게 있는데 

키 수식어란 특정 키 값이 눌려졌을때 이벤트를 처리하는 것이다. enter로 예시를 들어보면 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input v-on:keyup.enter="handleEnter"></input>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {},
                methods: {
                    handleEnter(){
                        console.log('enter가 눌렸습니다.');
                    }
                },
            });
        </script>
    </body>
</html>

 

이렇게 enter키가 input에서 눌렸을때 handleEnter라는 함수를 실행하라는 내용이다.

 

오늘 여기까지 Vue에서 이벤트 다루는 법을 알아봤습니다. 

다음에는 폼 입력 바인딩에 대해서 알아보도록 하겠습니다.

728x90

'Vue.js' 카테고리의 다른 글

Vue.js-watch속성  (1) 2020.09.14
Vue.js-computed  (1) 2020.09.14
Vue.js-폼 입력 바인딩  (1) 2020.09.14
Vue.js-데이터 바인딩  (0) 2020.09.13
Vue.js-톺아보기  (2) 2020.09.11
'Vue.js' Related Articles more
Comments