Vue.js 간단정리 #5 이벤트 핸들링

Jake Seo·2020년 5월 12일

Vue.js-간단정리

목록 보기

5/10

Vue.js 간단정리 #5 이벤트 핸들링

Intro

https://www.vuemastery.com/courses/intro-to-vue-js 에 정리된 공식 Vue 무료 강의에 있는 내용을 짧게 정리해보려 한다.

v-on:이벤트

이벤트 핸들링은 기본적으로 v-on:이벤트이름의 형태로 핸들링 할 수 있다.

예제는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>TEST!!</title>
  </head>

  <body>
    <div id="app">
      <button v-on:click="count += 1">increase</button>
      <div>{{count}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          count: 0,
        },
      });
    </script>
  </body>
</html>

버튼을 클릭할 때마다, 카운트가 1씩 증가하는 예제이다.

v-on:click="count += 1" 이런식으로 이벤트를 바인딩 시켰는데, 보기 좋은 방법은 아니다. 해당 부분을 콜백으로 대체해주는 것이 바람직하다.

콜백 메소드를 작성할 때는 생성해둔 Vue 객체내부에 methods 라는 속성을 이용할 수 있다. 소스코드에 적용시키면 다음과 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>TEST!!</title>
  </head>

  <body>
    <div id="app">
      <button v-on:click="increaseCount">increase</button>
      <div>{{count}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          count: 0,
        },
        methods: {
          increaseCount: function () {
            this.count += 1;
          },
        },
      });
    </script>
  </body>
</html>

특이하거나 유의할 점은 increaseCount 내부에 this 키워드를 이용하여 this.count를 집었다는 것이다.

v-on 이벤트의 축약 @

아래처럼 v-on:click을 쓰지않고 @click을 써도 똑같은 효과가 나온다.

v-on은 자주 쓰이는 것이기 때문에 쉽게 쓰라고 축약형인 @를 만들어두었다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>TEST!!</title>
  </head>

  <body>
    <div id="app">
      <button @click="increaseCount">increase</button>
      <div>{{count}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          count: 0,
        },
        methods: {
          increaseCount: function () {
            this.count += 1;
          },
        },
      });
    </script>
  </body>
</html>

ES6 단축문법으로 작성해보기

es6 단축문법을 이용하면

아래와 같은 문법에서...

Object: {
	functionName: function() {
      // function content...
    }
}

아래와 같은 문법으로 변환할 수 있다.

Object: {
	functionName() {
      // function content...
    }
}

단, 몇몇 브라우저에서는 지원하지 않을 수 있으니 유의하여야 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>TEST!!</title>
  </head>

  <body>
    <div id="app">
      <button @click="increaseCount">increase</button>
      <div>{{count}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          count: 0,
        },
        methods: {
          increaseCount() {
            this.count += 1;
          },
        },
      });
    </script>
  </body>
</html>