Vue 事件修饰符
Vue 中的事件修饰符会修改事件触发方法运行的方式，并帮助我们更高效、更直接地处理事件。
事件修饰符与 Vue 的 v-on 指令一起使用，例如：
- 阻止 HTML 表单的默认提交行为 (
v-on:submit.prevent) - 确保事件在页面加载后只能运行一次 (
v-on:click.once) - 指定使用哪个键盘按键来触发事件以运行方法 (
v-on:keyup.enter)
如何修改 v-on 指令
事件修饰符用于更详细地定义如何响应事件。
我们通过将标签连接到事件，如前所示，来使用事件修饰符：
<button v-on:click="createAlert">创建警报</button>
现在，要更具体地定义按钮的点击事件在页面加载后只触发一次，我们可以添加 .once 修饰符，如下所示：
<button v-on:click.once="createAlert">创建警报</button>
这是一个使用 .once 修饰符的示例：
示例
在 <button> 标签上使用 .once 修饰符，以便在“click”事件首次发生时只运行一次该方法。
<div id="app">
<p>点击按钮创建警报：</p>
<button v-on:click.once="creteAlert">创建警报</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
methods: {
createAlert() {
alert("按钮点击创建的警报")
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
注意：也可以在方法内部处理事件而不是使用事件修饰符，但事件修饰符使其更简单。
不同的 v-on 修饰符
事件修饰符在不同情况下使用。我们可以在监听键盘事件、鼠标点击事件时使用事件修饰符，甚至可以将事件修饰符组合使用。
事件修饰符 .once 可用于键盘和鼠标点击事件之后。
键盘按键事件修饰符
我们有三种不同的键盘事件类型：keydown、keypress 和 keyup。
对于每种按键事件类型，我们都可以精确指定要监听的按键。例如，我们有 .space、.enter、.w 和 .up 等。
您可以将按键事件写入网页，或使用 console.log(event.key) 写入控制台，以自行查找特定按键的值。
示例
keydown 键盘事件触发 'getKey' 方法，并且事件对象中的 'key' 值被写入控制台和网页。
<input v-on:keydown="getKey">
<p> {{ keyValue }} </p>
data() {
return {
keyValue = ''
}
},
methods: {
getKey(evt) {
this.keyValue = evt.key
console.log(evt.key)
}
}
自己动手试一试 »
我们还可以选择将事件限制为仅在按下系统修饰键 .alt、.ctrl、.shift 或 .meta 时发生。系统修饰键 .meta 在 Windows 计算机上代表 Windows 键，在 Apple 计算机上代表 Command 键。
| 按键修饰符 | 详情 |
|---|---|
.[Vue 按键别名] |
最常用的按键在 Vue 中有自己的别名。
|
.[字母] |
指定按下按键时出现的字母。例如：使用 .s 按键修饰符来监听 'S' 键。 |
.[系统修饰键] |
.alt、.ctrl、.shift 或 .meta。这些按键可以与其他按键组合使用，或与鼠标点击组合使用。 |
示例
使用 .s 修饰符在用户在 <textarea> 标签中输入“s”时创建一个警报。
<div id="app">
<p>尝试按 's' 键：</p>
<textarea v-on:keyup.s="createAlert"></textarea>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
methods: {
createAlert() {
alert("您按下了 'S' 键！")
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
组合键盘事件修饰符
事件修饰符也可以组合使用，这样只有当多个条件同时满足时，方法才会被调用。
示例
使用 .s 和 .ctrl 修饰符组合使用，在 <textarea> 标签中同时按下“s”和“ctrl”键时创建一个警报。
<div id="app">
<p>尝试按 's' 键：</p>
<textarea v-on:keydown.ctrl.s="createAlert"></textarea>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
methods: {
createAlert() {
alert("您同时按下了 'S' 和 'Ctrl' 键！")
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
鼠标按钮修饰符
要响应鼠标点击，我们可以写 v-on:click，但要指定哪个鼠标按钮被点击，我们可以使用 .left、.center 或 .right 修饰符。
触控板用户：您可能需要通过双指点击，或在触控板的右下角点击来执行右键单击。
示例
当用户在 <div> 元素中右键单击时，更改背景颜色。
<div id="app">
<div v-on:click.right="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>在此处按鼠标右键。</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
鼠标按钮事件也可以与系统修饰键结合使用。
示例
当用户在 <div> 元素中右键单击并同时按下“ctrl”键时，更改背景颜色。
<div id="app">
<div v-on:click.right.ctrl="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>在此处按鼠标右键。</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
事件修饰符 .prevent 可以与 .right 修饰符一起使用，以阻止右键单击时出现的默认下拉菜单。
示例
当您右键单击以更改 <div> 元素的背景颜色时，会阻止出现下拉菜单。
<div id="app">
<div v-on:click.right.prevent="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>在此处按鼠标右键。</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
可以在方法中使用 event.preventDefault() 来阻止右键单击后出现下拉菜单，但使用 Vue 的 .prevent 修饰符可以使代码更易读、更易维护。
您也可以响应左键鼠标点击并结合其他修饰符，例如 click.left.shift。
示例
按住“shift”键盘键并在 <img> 标签上按左鼠标按钮以更改图像。
<div id="app">
<p>按住 'Shift' 键并按左鼠标按钮：</p>
<img v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
imgUrlIndex: 0,
imgUrl: 'img_tiger_square.jpeg',
imgages: [
'img_tiger_square.jpeg',
'img_moose_square.jpeg',
'img_kangaroo_square.jpeg'
]
}
},
methods: {
changeImg() {
this.imgUrlIndex++
if(this.imgUrlIndex>=3){
this.imgUrlIndex=0
}
this.imgUrl = this.images[this.imgUrlIndex]
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
