Vue.js - event listener

by hyeyoon

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <!-- Passing own arguments with event -->
  <button v-on:click="increase(3, $event)">Click me</button>
  <p>{{ counter }}</p>
  <p v-on:mousemove="updateCoordinates">
    Coordinates: {{ x }} / {{ y }}
    - <span v-on:mousemove.stop>DEAD SPOT</span>
    <!-- .stop 또는 .stop.prevent 둘 중 하나를 써도 됨 -->
    <!-- <input type="text" v-on:keyup="alertMe"> -->
    <!-- key modifier를 추가하는 방법. chaining이 가능하다는 점. 여러개 키 등록 가능 -->
    <input type="text" v-on:keyup.enter.space="alertMe">
  </p>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	counter: 0,
    x: 0,
    y:0
  },
  methods: {
  	// Passing own arguments with event
  	increase: function(step, event) {
    	this.counter += step
    },
    updateCoordinates: function(evt) {
    	this.x = evt.clientX;
      this.y = evt.clientY;
    },
    alertMe: function() {
    	alert('Alert!');
    }
  }
})