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.
<!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>