Events Vue

add, subract, canvas

by Megi93

HTML

<div id="vue-app">
    <h1>Events</h1>
    <!-- 	v-on event and what kind of event want to listen to this -->
    <!-- nema potrebe za dodavanjem zagrada () jer Vue zna da kad imamo click event da ce morati da se aktivira nekakva funkcija, a da imamo na primer: -->
    <!-- <p>{{ test() }}</p> , e onda bi morale zagrade da idu, ali kada dodeljujemo EVENT-U ONDA NE MORAMO!!! -->
    <button @click="add(1)">Add a Year</button>
    <button @click="subtract(1)">Subtract a Year</button>
    <button @dblclick="add(10)">Add a Year</button>
    <button @dblclick="subtract(10)">Subtract a Year</button>
    <p>My age is {{ age }}</p>
	<div id="canvas" v-on:mousemove="updateXY"> {{ x }}, {{ y }}</div>
</div>

CSS

#canvas {
	width: 600px;
	padding: 200px 20px;
	text-align: center;
	border: 1px solid #333;
}

JavaScript

new Vue({
	el:'#vue-app',
	data: {
		age: 25,
		x: 0,
		y: 0
	}, methods: {
		add: function(inc) {
			this.age += inc;
		},
		subtract: function(dec) {
			this.age -= dec;
		},
		updateXY: function(event) {
			this.x = event.offsetX;
			this.y = event.offsetY;
		}
	}
})