Vue.js Events - Event Modifiers

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

Using most of the code from the previous post ( you can add these things called Event Modifiers which can be used to prevent, intercept or alter the functionality of basic DOM operations.


OnClick:     OnClick:

OnDblClick:   OnDblClick:

Event Modifier

You can only click this guy once: OnClick:
This HREF won't fire at all: Go to and waste time....

My age is {{age}}

<!doctype html>

<head><meta charset="UTF-8"><title>VueJS</title>
<script src=""></script>

		padding: 200px 20px;
		text-align: center;
		border: thin solid silver;


<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; } } }) </script> </html>

Link your website to this page! Copy and paste the URL below: