[Vue]イベントハンドル

<div id="example">
  <button v-on:click="AddCounter">+1</buttom>
  <p>버튼을 클릭한 횟수는 {{ counter }}번 입니다.</p>
</div>

var ex = new Vue({
    el: '#example',
    data: {
        counter: 0
    }
    methods: {
    	AddCounter: function() {
            this.counter += 1;
        }
    }
});

<div id="example">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

var ex = new Vue({
  el: '#example',
  methods: {
    say: function(message) {
      alert(message);
    }
  }
});

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

methods: {
  warn: function(message, event) {
    // 이제 네이티브 이벤트에 엑세스 할 수 있습니다
    if (event)
      event.preventDefault();
    alert(message)
  }
}

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 수식어는 Chaining 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>

<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기에서 처리됩니다. -->
<div v-on:click.capture="doThis">...</div>

<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다 -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>

<!-- 클릭 이벤트는 최대 한번만 트리거 됩니다 -->
<a v-on:click.once="doThis"></a>

<!-- 스크롤의 기본 이벤트를 취소할 수 없습니다 -->
<div v-on:scroll.passive="onScroll">...</div>

<!-- 키 값이 'Enter'일때만 'submit()'이 호출됩니다 -->
<input v-on:keyup.enter="submit">