Vue

VueJS Section 1

by Aubrey Taylor

HTML

<div id="app">
  <button v-on:click="increase(2, $event)">
  Click Me
  </button>
  <p>
  {{ counter }}
  </p>
  <p v-on:mousemove="updateCoords">Coords: {{ x }} / {{ y }}
  - <span v-on:mousemove.stop>DEAD SPOT</span>
  </p>
  <input type="text" v-on:keyup.enter="alert"/>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

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