v-on中单击事件、双击事件、鼠标划过事件
v-on事件绑定涉及的内容还不少，下面是我总结的部分内容：
- v-on相当于监听，监听到相关操作可以直接运行后面所跟的内容，例：
<button v-on:click="age++">add a year</button>也可以调用函数，例<button v-on:click="age--">subtract a year</button> - v-on可以用简写形式，用
@来代替。例如：<button @click="add(1)">add a year</button> - v-on后面所跟的函数带不带括号都行（无参数情况下）例：
<button v-on:click="add（）">add a year</button>和<button v-on:click="add">add a year</button>等价。
click和dblclick事件
- click是单击事件，dblclick是双击事件。被dblclick绑定的单击无效果。
mousemove事件
mousemove是鼠标划过监听事件，使用方法如下：<div id="canvas" v-on:mousemove="updateXY"> {{x}},{{y}} </div>，当我们把鼠标划过时，它其实会给我们提供一个事件对象，例如下面的代码示例：
data() {
return {
age: 30,
x: 0,
y: 0
};
},
<div id="canvas" v-on:mousemove="updateXY">
{{x}},{{y}}
</div>
updateXY(event) {
this.x = event.offsetX;//对象所包含的获取横坐标方法
this.y = event.offsetY;
},
完整代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
#canvas {
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid #333;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Vue CDN</title>
</head>
<body>
<div id="vue-app">
<h1>Events</h1>
<!-- <button v-on:click="age++">add a year</button> -->
<!-- <button @click="age++">add a year</button> -->
<!-- <button v-on:click="age--">subtract a year</button> -->
<!-- <button @click="age--">subtract a year</button> -->
<button @click="add(1)">add a year</button><!-- @click单击触发 -->
<button @click="subtract(1)">subtract a year</button>
<button @dblclick="add(10)">add a year</button><!-- @dblclick双击触发 -->
<button @dblclick="subtract(10)">subtract a year</button>
<p>我的年龄是：{{age}}</p>
<!-- mousemove envent -->
<div id="canvas" v-on:mousemove="updateXY">
{{x}},{{y}}
</div>
</div>
</body>
<script>
new Vue({
el: '#vue-app',
data() {
return {
age: 30,
x: 0,
y: 0
};
},
methods: {
add(inc) {
this.age += inc;
},
subtract(dec) {
this.age -= dec;
},
updateXY(event) {
// console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
},
}
})
</script>
</html>
