前端必知必会-Vue 事件修饰符

---

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 修饰符的示例：

示例
.once 修饰符用于 <button> 标签，仅在第一次发生“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 计算机上的命令键。

键修饰符详细信息

.[Vue 键别名] 最常见的键在 Vue 中都有自己的别名：
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
.[letter] 指定按下键时出现的字母。例如：使用 .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>

除了 .right 之外，还可以使用事件修饰符 .prevent修饰符，以防止右键单击时出现默认下拉菜单。

示例
右键单击以更改 <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>

---

总结

本文介绍了Vue 事件修饰符的使用，如有问题欢迎私信和评论