html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<h1>Events:</h1>
<button @click="add(1)">涨一岁</button> <!--点击事件-->
<button v-on:click="substract(1)">减一岁</button>
<button @dblclick="add(10)">涨10岁</button> <!--双击事件-->
<button v-on:dblclick="substract(10)">减10岁</button>
<p>my age is {{age}}</p>
<div id="canvas" v-on:mousemove="updateXY"> <!--鼠标移动事件-->
{{x}},{{y}}
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
new Vue({
el: '#app',
data: {
age: 30,
x: 0,
y: 0
},
methods: {
add: function (inc) {
this.age += inc;
},
substract: function (dec) {
this.age -= dec;
},
updateXY: function(event){
// console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
}
}
});
style.css
#canvas {
width: 500px;
padding: 200px center;
height: 400px;
text-align: center;
border: 1px solid #ccc;
}