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 (http://www.cfsnap.com/vue-js/vue-js-events-buttons/) you can add these things called Event Modifiers which can be used to prevent, intercept or alter the functionality of basic DOM operations.

Events

OnClick:     OnClick:

OnDblClick:   OnDblClick:


Event Modifier

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

My age is {{age}}



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

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