Vue 常用修饰符详解

大家好，欢迎来到IT知识分享网。

Vue.js 是一个渐进式 JavaScript 框架，它提供了丰富的指令和修饰符来增强 HTML 的功能。修饰符是 Vue 指令的一个特殊后缀，用于指定指令以特殊方式绑定。本文将详细介绍 Vue 中常用的修饰符，包括事件修饰符、按键修饰符、鼠标按钮修饰符、系统修饰符等，并提供示例代码帮助你更好地理解和应用这些修饰符。

1. 事件修饰符

事件修饰符用于处理 DOM 事件，可以简化事件处理的逻辑。

1.1 .stop

阻止事件冒泡。

<template> <div @click="handleOuterClick"> <button @click.stop="handleInnerClick">Click me</button> </div> </template> <script> export default { methods: { handleOuterClick() { console.log('Outer click'); }, handleInnerClick() { console.log('Inner click'); } } }; </script> 

1.2 .prevent

阻止事件的默认行为。

<template> <form @submit.prevent="handleSubmit"> <button type="submit">Submit</button> </form> </template> <script> export default { methods: { handleSubmit() { console.log('Form submitted'); } } }; </script> 

1.3 .capture

使用事件捕获模式。

<template> <div @click.capture="handleOuterClick"> <button @click="handleInnerClick">Click me</button> </div> </template> <script> export default { methods: { handleOuterClick() { console.log('Outer click in capture mode'); }, handleInnerClick() { console.log('Inner click'); } } }; </script> 

1.4 .self

只当事件是从侦听器绑定的元素本身触发时才触发回调。

<template> <div @click.self="handleSelfClick"> <button @click="handleButtonClick">Click me</button> </div> </template> <script> export default { methods: { handleSelfClick() { console.log('Self click'); }, handleButtonClick() { console.log('Button click'); } } }; </script> 

1.5 .once

只触发一次回调。

<template> <button @click.once="handleClick">Click me</button> </template> <script> export default { methods: { handleClick() { console.log('Button clicked once'); } } }; </script> 

1.6 .passive

以 { passive: true } 模式添加侦听器。

<template> <div @scroll.passive="handleScroll"> <div style="height: 2000px;"></div> </div> </template> <script> export default { methods: { handleScroll() { console.log('Scrolling'); } } }; </script> 

2. 按键修饰符

按键修饰符用于处理键盘事件，可以简化按键事件的监听。

2.1 常用按键修饰符

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

<template> <input @keyup.enter="handleEnter"> </template> <script> export default { methods: { handleEnter() { console.log('Enter key pressed'); } } }; </script> 

2.2 自定义按键修饰符

可以通过 Vue.config.keyCodes 自定义按键修饰符。

Vue.config.keyCodes.f1 = 112; 

<template> <input @keyup.f1="handleF1"> </template> <script> export default { methods: { handleF1() { console.log('F1 key pressed'); } } }; </script> 

3. 鼠标按钮修饰符

鼠标按钮修饰符用于处理鼠标事件，可以简化鼠标事件的监听。

3.1 常用鼠标按钮修饰符

• .left
• .right
• .middle

<template> <div @mousedown.right="handleRightClick">Right click me</div> </template> <script> export default { methods: { handleRightClick() { console.log('Right mouse button clicked'); } } }; </script> 

4. 系统修饰符

系统修饰符用于处理组合键事件，可以简化组合键事件的监听。

4.1 常用系统修饰符

• .ctrl
• .alt
• .shift
• .meta (在 Mac 系统中是 Command 键，在 Windows 系统中是 Windows 键)

<template> <input @keyup.ctrl.enter="handleCtrlEnter"> </template> <script> export default { methods: { handleCtrlEnter() { console.log('Ctrl + Enter pressed'); } } }; </script> 

4.2 组合使用

系统修饰符可以与其他修饰符组合使用。

<template> <input @keyup.ctrl.shift.enter="handleCtrlShiftEnter"> </template> <script> export default { methods: { handleCtrlShiftEnter() { console.log('Ctrl + Shift + Enter pressed'); } } }; </script> 

5. 示例代码

5.1 事件修饰符示例

<template> <div @click="handleOuterClick"> <button @click.stop="handleInnerClick">Click me</button> </div> </template> <script> export default { methods: { handleOuterClick() { console.log('Outer click'); }, handleInnerClick() { console.log('Inner click'); } } }; </script> 

5.2 按键修饰符示例

<template> <input @keyup.enter="handleEnter"> </template> <script> export default { methods: { handleEnter() { console.log('Enter key pressed'); } } }; </script> 

5.3 鼠标按钮修饰符示例

<template> <div @mousedown.right="handleRightClick">Right click me</div> </template> <script> export default { methods: { handleRightClick() { console.log('Right mouse button clicked'); } } }; </script> 

5.4 系统修饰符示例

<template> <input @keyup.ctrl.enter="handleCtrlEnter"> </template> <script> export default { methods: { handleCtrlEnter() { console.log('Ctrl + Enter pressed'); } } }; </script> 

6. 总结

Vue 提供了丰富的修饰符来增强 HTML 的功能，包括事件修饰符、按键修饰符、鼠标按钮修饰符和系统修饰符。通过合理使用这些修饰符，我们可以简化事件处理的逻辑，提高代码的可读性和可维护性。希望本文能够帮助你全面理解 Vue 常用的修饰符，并在实际开发中发挥其最大的价值。