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 计算机上的 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>
自己尝试 »
