Vue.js Events - Buttons

If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.

Using the basic idea of a button click, Vue.js uses "v-on:click='myJavaScriptMethodCallHere()'" to act on the onClick event, and consequently call a method(passYourParam). In the code below you can click a button and add or subtract time to the age value. The code below actually goes one step further and uses the "onmousemove" event and updates the display showing the exact X and Y coords of the mouse in the DIV (pretty cool, and will likely be useful at some point). Notice the Javascript math operators " += " and " -= " to increment and decrement values, respectively.

Events

OnClick:     OnClick:

OnDblClick:   OnDblClick:


My age is {{age}}

Part 2: OnMouseMove

{{x}}, {{y}}


<!doctype html>

<html>
<head><meta charset="UTF-8"><title>VueJS</title>
<script src="https://unpkg.com/vue@2.3.0"></script>

<style>
	#canvas{
		width:600px;
		padding: 200px 20px;
		text-align: center;
		border: thin solid silver;
	}	
</style>

</head>
<body>

<div id="app"> <h1>Events</h1> <!-- the "@" symbol is vue.js shorthand for "v-on:" --> <button @click="add(1)">Add a year</button> <button v-on:click="subtract(1)">Subtract a year</button> <button @dblclick="add(10)">Add 10 years</button> <button v-on:dblclick="subtract(10)">Subtract 10 years</button> <p>My age is {{age}}</p> <div id="canvas" v-on:onmousemove="updateXY">{{x}}, {{y}}</div> </body> <script> var vm = new Vue({ el:'#app', data: { age: 25, x: 0, y: 0 }, methods: { add:function(inc){ this.age+=inc; }, subtract:function(dec){ this.age-=dec; }, updateXY:function(event){ //by dumping the event object you can see all of the available properties, where we notice the offsetX and offsetY values //console.log(event); this.x=event.offsetX; this.y=event.offsetY; } } }) </script> </html>

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/vue-js/vue-js-events-buttons/