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