JSFiddle - React, Tailwind, and code Playground

by smithcz

HTML

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

<div id="app">
  <button @click="increase(2, $event)">Click me</button>
  <p>{{ counter }}</p>
  <p @mousemove="updateCoordinates">
    Coordinates: {{ x }} / {{ y }}
    - <span @mousemove.stop="">DEAD SPOT</span>
  </p>
  <input type="text" v-on:keyup.enter.space="alertMe">
</div>

JavaScript

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