VueJS Hello World

VueJS Course Exercise 1

by nevkatz

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
   <button v-on:click="increase">Increase</button>
   <button v-on:click="decrease">Decrease</button>
   <p v-on:mousemove="updateCoordinates">
    {{ x }} / {{ y }}
   </p>
  
   <p>
   {{ counter }}
   </p>
</div>

JavaScript

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