Tapahtumien käsittely on tärkeä osa vuorovaikutusta käyttäjien kanssa ja Vue.js:n sovelluksen tilan muuttamista. Vue.js tarjoaa erilaisia tapoja käsitellä tapahtumia, mukaan lukien sisäiset tapahtumakäsittelijät, menetelmät ja tapahtuman muokkaajat.
Tässä on joitain yleisiä Vue.js:n tapahtumia
1. click tapahtuma
Tämä tapahtuma käynnistyy, kun klikattavaa elementtiä, kuten painiketta tai linkkiä, napsautetaan. Sitä käytetään yleisesti suorittamaan toimintoja tai käynnistämään toimintoja, kun käyttäjä on vuorovaikutuksessa elementin kanssa.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input tapahtuma
Tämä tapahtuma käynnistyy, kun elementin arvo input muuttuu. Sitä käytetään yleisesti direktiivin kanssa arvon v-model sitomiseen input Vue-komponentin tieto-ominaisuuteen. Tämän avulla voit päivittää reaktiivisesti ja seurata arvon muutoksia input.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change tapahtuma
Tämä tapahtuma käynnistyy, kun lomakeelementin arvoa, kuten avattavaa valintavalikkoa tai valintaruutua, muutetaan. Sitä käytetään yleisesti toimintojen suorittamiseen tai tietojen päivittämiseen valitun vaihtoehdon tai elementin tarkistetun tilan perusteella.
<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 tapahtuma
Tämä tapahtuma käynnistyy, kun lomake lähetetään, joko napsauttamalla painiketta submit tai painamalla Enter-näppäintä kentän sisällä input. Sitä käytetään yleisesti lomakelähetysten käsittelemiseen, käyttäjän vahvistamiseen input ja toimien suorittamiseen, kuten API-pyyntöjen tekemiseen tai tietojen tallentamiseen.
<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 tapahtuma
Tämä tapahtuma laukeaa, kun näppäin vapautetaan sen jälkeen, kun se on painettu alas. Sitä käytetään yleensä suorittamaan toimintoja vastauksena näppäimistöön input, kuten suodattamaan kohdeluetteloa tai käynnistämään hakutoiminto.
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown tapahtuma
Tämä tapahtuma laukeaa, kun näppäintä painetaan. Sitä käytetään yleisesti tiettyjen näppäinyhdistelmien kuuntelemiseen tai toimintojen suorittamiseen, kun näppäintä pidetään painettuna, kuten diaesityksen selaamiseen tai pelin ohjaamiseen.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover tapahtuma
Tämä tapahtuma käynnistyy, kun hiiren osoitin siirretään elementin päälle. Sitä käytetään yleisesti lisätietojen näyttämiseen tai visuaalisen palautteen antamiseen vietäessä hiiren osoitinta elementin päälle.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout tapahtuma
Tämä tapahtuma käynnistyy, kun hiiren osoitin siirretään pois elementistä. Sitä käytetään yleisesti elementtien piilottamiseen tai muokkaamiseen, kun hiiri ei enää ole niiden päällä.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll tapahtuma
Tämä tapahtuma käynnistyy, kun elementtiä vieritetään. Sitä käytetään yleisesti toteuttamaan ominaisuuksia, kuten ääretön vieritys, laiska sisällön lataaminen tai käyttöliittymäelementtien päivittäminen sijainnin perusteella scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus tapahtuma
Tämä tapahtuma käynnistyy, kun elementti vastaanottaa focus, yleensä kun sitä napsautetaan tai kun käyttäjä navigoi siihen näppäimistöllä. Sitä käytetään yleisesti toimien suorittamiseen tai visuaalisen palautteen antamiseen elementin input tai elementin vahvistuessa focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Nämä ovat vain joitain perusesimerkkejä Vue.js:n tapahtumista. Voit mukauttaa tapahtumankäsittelytoiminnot projektisi erityistarpeiden mukaan.