Obsługa Zdarzeń - Przyciski Kontrolne

Witaj w Symulatorze Sterowania NOVA LAB! Dr. Nova mówi: tu panele sterowania reagują na komendy załogi - tak jak komponenty Vue reagują na zdarzenia użytkownika.

Podstawowa Obsługa Zdarzeń

1<template>
2  <div class="control-panel" style="background: #0a0e27; color: #00ff88;">
3    <!-- Pełna składnia -->
4    <button v-on:click="handleClick" style="background: #00b4d8; color: #0a0e27;">Aktywuj</button>
5
6    <!-- Skrócona składnia (zalecana) -->
7    <button @click="handleClick" style="background: #00b4d8; color: #0a0e27;">Aktywuj</button>
8
9    <!-- Inline handler -->
10    <button @click="powerLevel++" style="background: #00b4d8; color: #0a0e27;">Moc: {{ powerLevel }}%</button>
11
12    <!-- Z argumentem -->
13    <button @click="initiateSystem('OXYGEN')" style="background: #00b4d8; color: #0a0e27;">Start O2</button>
14
15    <!-- Z event object -->
16    <button @click="logEvent($event)" style="background: #00b4d8; color: #0a0e27;">Log Command</button>
17  </div>
18</template>
19
20<script setup>
21import { ref } from 'vue'
22
23const powerLevel = ref(0)
24
25function handleClick() {
26  console.log('System activated!')
27}
28
29function initiateSystem(systemName) {
30  console.log(`Initializing ${systemName} system...`)
31}
32
33function logEvent(event) {
34  console.log('Event:', event.type, event.target)
35}
36</script>

Typowe Zdarzenia

1<template>
2  <!-- Mouse events -->
3  <div @click="onClick" @dblclick="onDoubleClick">Klik</div>
4  <div @mouseenter="onEnter" @mouseleave="onLeave">Hover</div>
5  <div @mousedown="onDown" @mouseup="onUp">Press</div>
6
7  <!-- Keyboard events -->
8  <input @keydown="onKeyDown" @keyup="onKeyUp" @keypress="onKeyPress" />
9
10  <!-- Form events -->
11  <form @submit="onSubmit">
12    <input @input="onInput" @change="onChange" @focus="onFocus" @blur="onBlur" />
13  </form>
14
15  <!-- Other -->
16  <div @scroll="onScroll">Scrollable content</div>
17  <img @load="onLoad" @error="onError" :src="imageUrl" />
18</template>

Dostęp do Event Object

1<template>
2  <button @click="handleClick">Kliknij</button>
3  <input @keyup="handleKey" />
4</template>
5
6<script setup>
7function handleClick(event) {
8  console.log('Target:', event.target)
9  console.log('Position:', event.clientX, event.clientY)
10  console.log('Buttons:', event.buttons)
11}
12
13function handleKey(event) {
14  console.log('Key:', event.key)
15  console.log('Code:', event.code)
16  console.log('Ctrl:', event.ctrlKey)
17  console.log('Shift:', event.shiftKey)
18}
19</script>