Key modifiers for keyboard events in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of key modifiers in Vue keyboard events?

Key modifiers in Vue help you listen for specific keys or key combinations easily without writing extra code to check the key manually.

beginner

How do you listen for the Enter key press in Vue using key modifiers?

You add @keydown.enter to your element. Vue will only run the event handler when the Enter key is pressed.

beginner

What does the .ctrl key modifier do in Vue keyboard events?

The .ctrl modifier listens for the Control key being held down during the keyboard event.

intermediate

How can you listen for a combination like Ctrl + S in Vue keyboard events?

Use @keydown.ctrl.s on the element. Vue triggers the handler only when both Control and S keys are pressed together.

intermediate

What is the difference between .exact and other key modifiers in Vue keyboard events?

.exact ensures only the specified keys are pressed, no extra modifiers like Shift or Alt. Other modifiers just check if their key is pressed, ignoring extras.

Which Vue key modifier listens for the Escape key?

A .escape

B .escKey

C .esc

D .exit

Vue uses .escape as the key modifier for the Escape key.

How do you listen for Shift + Enter keys pressed together in Vue?

A @keydown.enter+shift

B @keydown.enter.shift

C @keydown.shift+enter

D @keydown.shift.enter

Modifiers are chained with dots. @keydown.shift.enter listens for Shift and Enter pressed together.

What does the .prevent modifier do when added to a keyboard event in Vue?

A Stops the event from bubbling up

B Prevents the default browser action

C Stops listening to the event

D Logs the event to console

.prevent calls event.preventDefault() to stop default browser behavior.

Which key modifier would you use to listen for the Alt key in Vue?

A .meta

B .option

C .alt

D .altKey

The .alt modifier listens for the Alt key being pressed.

What happens if you use @keydown.enter.exact in Vue?

A Triggers on Enter key only if no other modifier keys are pressed

B Triggers on Enter key with any modifiers

C Triggers on any key except Enter

D Triggers on Enter key and any other keys pressed

.exact ensures only the Enter key is pressed, no extra modifiers like Shift or Ctrl.

Explain how to use Vue key modifiers to listen for a keyboard shortcut like Ctrl + Shift + A.

Think about chaining modifiers in the event name.

Describe the difference between using .exact and not using it in Vue keyboard event modifiers.

Consider how strict the key matching is.