JSFiddle - React, Tailwind, and code Playground

by Pedro Cruz

HTML

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

<div id="app">
  <div>
    <button @click="increase(2)">
      Click Me
    </button>
    <button @click="counter++">
      Click Me
    </button>
    <p>
      {{ counter * 2 > 10 ? 'Greater than 10' : 'Smaller than 10' }}
    </p>
  </div>
  <div>
    <p @mousemove="updateCoordinates">
      Coordinates: {{ x }} / {{ y }} - <span @mousemove.stop.prevent="">DEAD SPOT</span>
    </p>
  </div>
  <div>
    <button @click="alertMe">
      Click me
    </button>
  </div>
</div>

JavaScript

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