指令修饰符通过“”指明一些指令后缀，不同后缀封装了不同的处理操作→简化代码
按键修饰符
- 使用.enter修饰符：
<input @keyup.enter="submitForm">
上述代码表示在input元素上绑定了一个keyup事件，当用户按下回车键时（keyCode为13），会触发submitForm方法。
- 使用.tab修饰符：
<input @keyup.tab="nextInput">
上述代码表示在input元素上绑定了一个keyup事件，当用户按下Tab键时（keyCode为9），会触发nextInput方法。
- 使用.delete修饰符：
<input @keyup.delete="deleteItem">
上述代码表示在input元素上绑定了一个keyup事件，当用户按下删除键时（keyCode为46），会触发deleteItem方法。
- 使用.esc修饰符：
<input @keyup.esc="cancelEdit">
上述代码表示在input元素上绑定了一个keyup事件，当用户按下Esc键时（keyCode为27），会触发cancelEdit方法。
- 使用.space修饰符：
<button @keyup.space="togglePlay">
上述代码表示在button元素上绑定了一个keyup事件，当用户按下空格键时（keyCode为32），会触发togglePlay方法。
- 使用.up修饰符：
<input @keyup.up="increaseValue">
上述代码表示在input元素上绑定了一个keyup事件，当用户按下上箭头键时（keyCode为38），会触发increaseValue方法。
- 使用.down修饰符：
<input @keyup.down="decreaseValue">
上述代码表示在input元素上绑定了一个keyup事件，当用户按下下箭头键时（keyCode为40），会触发decreaseValue方法。
这些例子展示了按键修饰符的使用方式，通过使用不同的修饰符，我们可以更精确地监听和处理特定的键盘事件。
v-model修饰符
v-model修饰符用于修改和定制v-model指令的行为。以下是一些具体的例子来说明v-model修饰符的用法和效果：
- .lazy修饰符：使用.lazy修饰符会将输入框的输入延迟到change事件触发时才更新绑定的数据。这在处理用户输入较慢或者需要处理大量输入时很有用。例如：
<input v-model.lazy="message" />
在上面的例子中，当用户在输入框中输入内容时，数据message不会立即更新，而是在用户停止输入并触发change事件时才更新。
- .number修饰符：使用.number修饰符可以将输入框的值转化为数字类型。这在处理需要数字输入的场景非常有用。例如：
<input v-model.number="age" />
在上面的例子中，无论用户输入的是字符串还是数字，绑定的数据age都会被自动转化为数字类型。
- .trim修饰符：使用.trim修饰符可以去除输入框开头和结尾的空格。这在处理用户输入时很有用，可以避免不必要的空格干扰。例如：
<input v-model.trim="username" />
在上面的例子中，用户输入的username会自动去除开头和结尾的空格。
- .lazy + .trim修饰符：.lazy和.trim修饰符可以一起使用，用于延迟去除输入框开头和结尾的空格。例如：
<input v-model.lazy.trim="username" />
在上面的例子中，用户输入的username会在change事件触发时去除开头和结尾的空格。
事件修饰符
Vue中的事件修饰符用于修改事件的行为，包括取消冒泡、阻止默认行为等。下面通过几个例子来详细讲解Vue中的事件修饰符的使用。
例子1：阻止冒泡使用.stop
在Vue中，我们可以使用.stop修饰符来阻止事件冒泡。例如，假设有一个父组件和一个子组件，父组件绑定了一个点击事件，子组件内部也绑定了一个点击事件。如果我们不希望事件冒泡到父组件，可以在子组件的点击事件上使用.stop修饰符。
<template><div @click="parentClick"><child @click.stop="childClick"></child></div>
</template><script>
export default {methods: {parentClick() {console.log("Parent clicked");},childClick() {console.log("Child clicked");}}
};
</script>
在这个例子中，当我们点击子组件时，只会触发childClick方法，不会触发parentClick方法。
例子2：阻止默认行为使用.prevent
在Vue中，我们可以使用.prevent修饰符来阻止事件的默认行为。例如，如果我们在表单中绑定了一个提交事件，但是不希望表单提交的时候刷新页面，可以在提交事件上使用.prevent修饰符。
<template><form @submit.prevent="submitForm"><button type="submit">Submit</button></form>
</template><script>
export default {methods: {submitForm() {console.log("Form submitted");// 在这里可以执行自定义的表单提交逻辑}}
};
</script>
在这个例子中，当我们点击提交按钮时，不会触发表单的默认提交行为，而是执行submitForm方法。
例子3：键盘修饰符
在Vue中，我们可以使用键盘修饰符来监听特定的键盘事件。常用的键盘修饰符包括.enter（回车键）、.tab（Tab键）、.space（空格键）等。
<template><div><input @keyup.enter="handleEnterKey" type="text" placeholder="Press Enter"><input @keyup.tab="handleTabKey" type="text" placeholder="Press Tab"><input @keyup.space="handleSpaceKey" type="text" placeholder="Press Space"></div>
</template><script>
export default {methods: {handleEnterKey() {console.log("Enter key pressed");},handleTabKey() {console.log("Tab key pressed");},handleSpaceKey() {console.log("Space key pressed");}}
};
</script>
在这个例子中，当我们在输入框中按下回车键、Tab键或空格键时，会分别触发相应的事件处理方法。
综上所述，Vue中的事件修饰符可以通过.stop阻止事件冒泡、.prevent阻止默认行为，还可以使用键盘修饰符来监听特定的键盘事件。根据具体的需求，我们可以组合使用不同的修饰符来修改事件的行为。