Events

by Ansmtz

HTML

<div id="app">
  <button v-on:click="increase(1)">Click Me</button>
  <p>
  {{counter > 5 ? `${counter} is very high number`: counter}}
  </p>
  <p v-on:mousemove="updateCoords">
  Coordinates: {{x}}, {{y}}
  <span v-on:mousemove.stop>DEAD SPOT</span>
  </p>
  <input type="text" v-on:keyup.enter="alertMe" v-bind:value='inputAlert'>
</div>

JavaScript

new Vue({
el: "#app",
data: {
	counter: 0,
  x: 0,
  y: 0,
  inputAlert: '',
},
methods: {
	increase: function(step){
  	this.counter+=step;
  },
  updateCoords: function(e){
  	this.x = e.clientX;
    this.y = e.clientY;
  },
  alertMe: function(e){
  	this.inputAlert = e.target.value;
    alert(this.inputAlert);
  }
}
})