Obsługa zdarzeń jest ważną częścią interakcji z użytkownikami i zmiany stanu aplikacji w Vue.js. Vue.js zapewnia różne sposoby obsługi zdarzeń, w tym wbudowane procedury obsługi zdarzeń, metody i modyfikatory zdarzeń.
Oto kilka typowych zdarzeń w Vue.js
1. click wydarzenie
To zdarzenie jest wyzwalane po kliknięciu klikalnego elementu, takiego jak przycisk lub łącze. Jest powszechnie używany do wykonywania akcji lub wyzwalania funkcji, gdy użytkownik wchodzi w interakcję z elementem.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input wydarzenie
To zdarzenie jest wyzwalane, gdy zmienia się wartość elementu input. Jest powszechnie używany z v-model dyrektywą do powiązania input wartości z właściwością danych w komponencie Vue. Pozwala to reaktywnie aktualizować i śledzić zmiany wartości input.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change wydarzenie
To zdarzenie jest wyzwalane, gdy wartość elementu formularza, takiego jak lista rozwijana wyboru lub pole wyboru, zostanie zmieniona. Jest powszechnie używany do wykonywania akcji lub aktualizacji danych na podstawie wybranej opcji lub zaznaczonego stanu elementu.
<select v-model="selectedOption" v-on:change="handleSelectChange">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>data() {
return {
selectedOption: ''
};
},
methods: {
handleSelectChange() {
console.log('Selected option:', this.selectedOption);
}
}
4. submit wydarzenie
To zdarzenie jest wyzwalane po przesłaniu formularza przez kliknięcie przycisku submit lub naciśnięcie klawisza Enter w input polu. Jest powszechnie używany do obsługi przesyłania formularzy, sprawdzania poprawności użytkownika input i wykonywania działań, takich jak wysyłanie żądań API lub zapisywanie danych.
<form v-on:submit="handleSubmit">
<input type="text" v-model="name" />
<button type="submit">Submit</button>
</form>data() {
return {
name: ''
};
},
methods: {
handleSubmit(event) {
event.preventDefault();
console.log('Form submitted! Name:', this.name);
}
}
5. keyup wydarzenie
To zdarzenie jest wyzwalane, gdy klawisz zostanie zwolniony po naciśnięciu. Jest powszechnie używany do wykonywania działań w odpowiedzi na klawiaturę input, takich jak filtrowanie listy elementów lub uruchamianie funkcji wyszukiwania.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown wydarzenie
To zdarzenie jest wyzwalane po naciśnięciu klawisza. Jest powszechnie używany do nasłuchiwania określonych kombinacji klawiszy lub wykonywania czynności, gdy klawisz jest wciśnięty, takich jak poruszanie się po pokazie slajdów lub sterowanie grą.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover wydarzenie
To zdarzenie jest wyzwalane, gdy wskaźnik myszy zostanie przesunięty nad element. Jest powszechnie używany do wyświetlania dodatkowych informacji lub wizualnej informacji zwrotnej po najechaniu kursorem na element.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout wydarzenie
To zdarzenie jest wyzwalane, gdy wskaźnik myszy zostanie przesunięty poza element. Jest powszechnie używany do ukrywania lub modyfikowania elementów, gdy mysz nie znajduje się już nad nimi.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll wydarzenie
To zdarzenie jest wyzwalane, gdy element jest przewijany. Jest powszechnie używany do implementacji funkcji, takich jak nieskończone przewijanie, leniwe ładowanie treści lub aktualizowanie elementów interfejsu użytkownika na podstawie pozycji scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus wydarzenie
To zdarzenie jest wyzwalane, gdy element otrzymuje focus, zwykle po kliknięciu lub gdy użytkownik przechodzi do niego za pomocą klawiatury. Jest powszechnie używany do wykonywania akcji lub dostarczania wizualnej informacji zwrotnej, gdy input element lub zyskuje focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
To tylko kilka podstawowych przykładów zdarzeń w Vue.js. Możesz dostosować funkcje obsługi zdarzeń do konkretnych potrzeb swojego projektu.