Modyfikatory Zdarzeń

Vue oferuje modyfikatory, które upraszczają typowe operacje na zdarzeniach.

Modyfikatory Event

1<template>
2  <!-- .prevent - zapobiega domyślnej akcji -->
3  <form @submit.prevent="onSubmit">
4    <button type="submit">Wyślij</button>
5  </form>
6
7  <!-- .stop - zatrzymuje propagację -->
8  <div @click="outer">
9    <button @click.stop="inner">Tylko inner</button>
10  </div>
11
12  <!-- .once - tylko raz -->
13  <button @click.once="runOnce">Tylko raz</button>
14
15  <!-- .self - tylko na tym elemencie -->
16  <div @click.self="onlyThis">
17    <button>Klik na button nie wywoła onlyThis</button>
18  </div>
19
20  <!-- .capture - tryb capture -->
21  <div @click.capture="captureFirst">
22    <button @click="child">Child</button>
23  </div>
24
25  <!-- .passive - dla scroll performance -->
26  <div @scroll.passive="onScroll">Scroll content</div>
27
28  <!-- Kombinacje -->
29  <a @click.stop.prevent="handleLink">Link</a>
30</template>
31
32<script setup>
33function onSubmit() {
34  console.log('Form submitted without page reload')
35}
36
37function outer() { console.log('outer') }
38function inner() { console.log('inner') }
39function runOnce() { console.log('This runs only once') }
40function onlyThis() { console.log('Clicked on div itself') }
41</script>

Modyfikatory Klawiszy

1<template>
2  <!-- Konkretne klawisze -->
3  <input @keyup.enter="submit" placeholder="Enter to submit" />
4  <input @keyup.esc="cancel" placeholder="Esc to cancel" />
5
6  <!-- Strzałki -->
7  <div @keyup.up="moveUp" @keyup.down="moveDown"
8       @keyup.left="moveLeft" @keyup.right="moveRight">
9
10  <!-- Funkcyjne -->
11  <input @keyup.delete="deleteItem" />
12  <input @keyup.space="togglePlay" />
13  <input @keyup.tab="nextField" />
14
15  <!-- Kombinacje z modyfikatorami -->
16  <input @keyup.ctrl.enter="submitWithCtrl" />
17  <input @keyup.shift.delete="forceDelete" />
18  <input @keyup.alt.s="saveShortcut" />
19  <input @keyup.meta.s="macSave" /> <!-- Cmd na Mac -->
20
21  <!-- Dokładny modyfikator -->
22  <input @keyup.ctrl.exact="onlyCtrl" /> <!-- Tylko Ctrl, nie Ctrl+Shift -->
23</template>

Modyfikatory Myszy

1<template>
2  <!-- Przyciski myszy -->
3  <div @click.left="leftClick">Left click</div>
4  <div @click.right="rightClick">Right click</div>
5  <div @click.middle="middleClick">Middle click</div>
6
7  <!-- Menu kontekstowe -->
8  <div @contextmenu.prevent="showCustomMenu">
9    Prawy przycisk = custom menu
10  </div>
11</template>
12
13<script setup>
14function leftClick() { console.log('Left') }
15function rightClick() { console.log('Right') }
16function middleClick() { console.log('Middle') }
17function showCustomMenu(e) {
18  console.log('Custom menu at:', e.clientX, e.clientY)
19}
20</script>