小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前面我们用 Mustache 语法、v-text、v-html 绑定了元素的内容，用 v-bind 绑定了元素的属性，而在前端开发中还有另外一个非常重要的特性：交互。
在前端开发中，我们需要经常和用户进行各种各样的交互，这时，我们必须监听用户触发的事件（点击、拖拽、键盘事件等等）。
在 Vue 中如何监听事件呢？我们可以使用 v-on 指令。
1. v-on 介绍
- 缩写：
@ - 预期：
Function | Inline Statement | Object - 参数：
event - 修饰符：
.stop- 调用event.stopPropagation()。.prevent- 调用event.preventDefault()。.capture- 添加事件侦听器时使用capture模式。.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyAlias}- 仅当事件是从特定键触发时才触发回调。.once- 只触发一次回调。.left- 只当点击鼠标左键时触发。.right- 只当点击鼠标右键时触发。.middle- 只当点击鼠标中键时触发。.passive-{passive: true}模式添加侦听器。
- 用法：绑定事件监听器
2. v-on 基本使用
<template id="my-app">
<!-- 1. 可以绑定方法 -->
<!-- 完整写法：v-on:监听的事件="methods 中的方法" -->
<!-- 比如监听点击的事件 -->
<button v-on:click="btnClick">按钮1</button>
<!-- 比如监听指针设备（通常指鼠标）在元素上移动的事件 -->
<div class="area" v-on:mousemove="mouseMove">我是 div</div>
<!-- v-on 的语法糖（简写/缩写）形式：@ -->
<!-- v-on:click 可以简写成 @click -->
<button @click="btnClick">按钮2</button>
<!-- 2. 可以绑定内联语句 -->
<button v-on:click="counter++">按钮3</button>
<button v-on:click="if (isCount) { counter++; }">按钮4</button>
<!-- 内联语句中涉及到了参数的传递，下一小节会讲 -->
<button v-on:click="btnClick2('哈哈哈')">按钮5</button>
<button v-on:click="btnClick3('哈哈哈', $event)">按钮6</button>
<h2>{{ counter }}</h2>
<!-- 3. 可以不带参数绑定一个“事件/监听器”键值对的对象 -->
<!-- 这样可以实现一个元素上同时绑定多个事件 -->
<!-- 格式：v-on="“事件/监听器”键值对对象" -->
<div class="area" v-on="{ click: btnClick, mousemove: mouseMove}">我也是 div</div>
<!-- 不带参数时也可以使用语法糖，但阅读性不太好，不够直观，不推荐这样简写 -->
<div class="area" @="{ click: btnClick, mousemove: mouseMove}">我也是 div</div>
</template>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.area {
width: 100px;
height: 100px;
background-color: #c7edcc;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- 1. 可以绑定方法 -->
<!-- 完整写法：v-on:监听的事件="methods 中的方法" -->
<!-- 比如监听点击的事件 -->
<button v-on:click="btnClick">按钮1</button>
<!-- 比如监听指针设备（通常指鼠标）在元素上移动的事件 -->
<div class="area" v-on:mousemove="mouseMove">我是 div</div>
<!-- v-on 的语法糖（简写/缩写）形式：@ -->
<!-- v-on:click 可以简写成 @click -->
<button @click="btnClick">按钮2</button>
<!-- 2. 可以绑定内联语句 -->
<button v-on:click="counter++">按钮3</button>
<button v-on:click="if (isCount) { counter++; }">按钮4</button>
<!-- 内联语句中涉及到了参数的传递，下一小节会讲 -->
<button v-on:click="btnClick2('哈哈哈')">按钮5</button>
<button v-on:click="btnClick3('哈哈哈', $event)">按钮6</button>
<h2>{{ counter }}</h2>
<!-- 3. 可以不带参数绑定一个“事件/监听器”键值对的对象 -->
<!-- 这样可以实现一个元素上同时绑定多个事件 -->
<!-- 格式：v-on="“事件/监听器”键值对对象" -->
<div class="area" v-on="{ click: btnClick, mousemove: mouseMove}">我也是 div</div>
<!-- 不带参数时也可以使用语法糖，但阅读性不太好，不够直观，不推荐这样简写 -->
<div class="area" @="{ click: btnClick, mousemove: mouseMove}">我也是 div</div>
</template>
<script src="./js/vue.js"></script>
<script>
const App = {
data() {
return {
message: '你好啊',
isCount: true,
counter: 0
}
},
methods: {
btnClick() {
console.log('按钮被点击啦');
},
btnClick2(msg) {
console.log(msg, event);
},
btnClick3(msg, event) {
console.log(msg, event);
},
mouseMove() {
console.log('鼠标移动啦');
}
},
template: '#my-app'
};
Vue.createApp(App).mount('#app');
</script>
</body>
</html>
