Vue에서 이벤트 처리

모든 존경받는 Javascript 프레임워크에서 예상할 수 있듯이 Vue는 마우스 움직임, 클릭, 키 입력 등과 같은 DOM 이벤트를 처리하는 방법을 제공합니다.
매우 흥미롭고 즐거운 것은 그러한 이벤트를 관리할 수 있는 빠르고 쉬운 방법입니다.

v-on: 구문을 사용하고 핸들러 메서드를 제공하면 이벤트를 쉽게 처리할 수 있습니다. 다음은 몇 가지 예입니다.

클릭 이벤트 처리

<div id="app">
  <!-- `sayHello` is the name of a method -->
  <button v-on:click="sayHello">Hi</button>
</div>

그리고 물론 핸들러:

var example2 = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    sayHello: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        //this will show the tag which fired the event
        alert(event.target.tagName)
      }
    }
  }
})

// you can invoke methods in JavaScript too
example2.greet() // => 'Hello Vue.js!'

더블 클릭

    <div id="app">
        <button v-on:dblclick="handleDoubleClick">Pssst. Double click me ;)</button>
    </div>

그리고 이것은 더블 클릭 핸들러입니다:

        var app = new Vue({
          el: '#app', 
          methods : {
            handleDoubleClick : function() {
                console.log("Hi, here we are dealing with a double click it seems....");
            }
          }
        })

이벤트 객체 처리

이벤트 핸들러를 시작하고 바닐라 자바스크립트에서와 같이 전체 객체를 전달하여 이전에 본 것처럼 전체 이벤트에 분명히 액세스할 수 있습니다.

<button v-on:click="handleEvent($event)">We'll do it the old way</button>

물론 Vue는 양식을 제출할 때 here is the link to the official guide's paragraph 과 같은 preventDefault() 함수와 같은 일반적인 작업을 처리하는 간단한 방법을 제공합니다.