1. **基础用法**
- **绑定事件方法**
- 在Vue组件中，首先要定义一个方法来处理事件。例如，在`methods`选项中定义一个简单的方法：
```javascript
export default {
data() {
return {
message: '初始消息'
};
},
methods: {
showMessage() {
alert(this.message);
}
}
};
```
- 然后在模板中使用`v - on`指令将这个方法绑定到一个按钮的`click`事件上，`v - on`指令可以完整地写成`v - on:click`，如下：
```vue
<template>
<div>
<button v - on:click="showMessage">显示消息</button>
</div>
</template>
```
- 当用户点击这个按钮时，`showMessage`方法就会被调用，弹出一个包含`message`内容的警告框。
- **内联表达式**
- 除了绑定方法，`v - on`还可以直接使用内联表达式。例如，在按钮点击时直接修改`message`的值：
```vue
<template>
<div>
<button v - on:click="message = '新消息'">修改消息</button>
</div>
</template>
```
- 这种方式在简单的场景下很方便，但对于复杂的逻辑，还是推荐将代码封装在方法中，以提高代码的可读性和可维护性。
2. **事件修饰符**
- **.prevent修饰符**
- 用于阻止元素的默认行为。例如，在一个`a`标签（链接）上，如果不希望它跳转到指定的`href`链接，可以使用`.prevent`修饰符。假设在组件中有一个链接：
```vue
<template>
<a v - on:click.prevent href="https://example.com">不会跳转的链接</a>
</template>
```
- 当用户点击这个链接时，不会执行默认的跳转行为，而是可以在`v - on`绑定的方法（如果有）中定义其他操作。
- **.stop修饰符**
- 用于阻止事件冒泡。比如，有一个嵌套的元素结构，父元素和子元素都有`click`事件监听器。定义如下组件：
```javascript
export default {
data() {
return {
parentText: '这是父元素',
childText: '这是子元素'
};
},
methods: {
parentClick() {
console.log(this.parentText);
},
childClick() {
console.log(this.childText);
}
}
};
```
- 在模板中这样使用：
```vue
<template>
<div v - on:click="parentClick">
父元素
<div v - on:click.stop="childClick">
子元素
</div>
</div>
</template>
```
- 当点击子元素时，只有`childClick`方法会被调用，因为`.stop`修饰符阻止了事件从子元素冒泡到父元素，所以`parentClick`方法不会被调用。
- **.capture修饰符**
- 与`.stop`相反，它用于捕获事件。当使用`.capture`修饰符时，事件会从最外层元素向最内层元素捕获。例如：
```vue
<template>
<div v - on:click.capture="parentClick">
父元素
<div v - on:click="childClick">
子元素
</div>
</div>
</template>
```
- 当点击子元素时，首先会调用`parentClick`方法（因为是捕获阶段），然后再调用`childClick`方法（冒泡阶段）。
- **.self修饰符**
- 只有当事件是由元素自身触发时才会执行绑定的方法。例如：
```vue
<template>
<div v - on:click.self="parentClick">
父元素
<div>
<button v - on:click="childClick">子元素按钮</button>
</div>
</div>
</template>
```
- 当点击子元素按钮时，`parentClick`方法不会被调用，只有当直接点击父元素时，`parentClick`方法才会被调用。
- **.once修饰符**
- 表示事件只执行一次。例如：
```vue
<template>
<button v - on:click.once="showMessage">只显示一次消息</button>
</template>
```
- 当按钮被点击一次后，`showMessage`方法会被调用，之后再点击按钮，该方法不会再被调用。
3. **按键修饰符**
- **基本按键修饰符**
- Vue提供了一些常用按键的修饰符，如`.enter`（回车键）、`.esc`（Esc键）等。例如，在一个输入框中，当用户按下回车键时执行一个方法：
```javascript
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleEnter() {
console.log('用户按下回车键，输入的值为:', this.inputValue);
}
}
};
```
```vue
<template>
<input type="text" v - model="inputValue" v - on:keydown.enter="handleEnter">
</template>
```
- 当用户在输入框中输入内容并按下回车键时，`handleEnter`方法就会被调用，并且可以在控制台获取输入框中的值。
- **系统修饰键修饰符**
- 对于一些系统修饰键，如`Ctrl`、`Alt`、`Shift`等，也有对应的修饰符。例如，只有当用户同时按下`Ctrl`和`Enter`键时才执行一个方法：
```vue
<template>
<input type="text" v - model="inputValue" v - on:keydown.ctrl.enter="handleCtrlEnter">
</template>
```
- 这样可以更精确地控制事件在特定按键组合下的执行。
- **自定义按键修饰符（Vue 2）**
- 在Vue 2中，可以通过`Vue.config.keyCodes`来自定义按键修饰符。例如，要定义`F1`键的修饰符：
```javascript
Vue.config.keyCodes.F1 = 112;
```
- 然后就可以在模板中使用`v - on:keydown.F1`来绑定`F1`键按下的事件。不过在Vue 3中，这种方式已被废弃，推荐使用`@keydown.[key]`（如`@keydown.f1`）的形式来代替。