Olayları işlemek, kullanıcılarla etkileşim kurmanın ve Vue.js'de bir uygulamanın durumunu değiştirmenin önemli bir parçasıdır. Vue.js, satır içi olay işleyiciler, yöntemler ve olay değiştiriciler dahil olmak üzere olayları işlemek için çeşitli yollar sağlar.
İşte Vue.js'deki bazı yaygın olaylar
1. click olay
Bu olay, bir düğme veya bağlantı gibi tıklanabilir bir öğe tıklandığında tetiklenir. Bir kullanıcı öğeyle etkileşime girdiğinde eylemleri gerçekleştirmek veya işlevleri tetiklemek için yaygın olarak kullanılır.
<button v-on:click="handleClick">Click me</button>methods: {
handleClick() {
console.log('Button clicked!');
}
}
2. input olay
Bu olay, bir elemanın değeri değiştiğinde tetiklenir input. Değeri Vue'nun bileşenindeki bir data özelliğine v-model bağlamak için yönergeyle birlikte yaygın olarak kullanılır. input Bu, değerdeki değişiklikleri tepkisel olarak güncellemenizi ve izlemenizi sağlar input.
<input v-model="message" v-on:input="handleInput" />data() {
return {
message: ''
};
},
methods: {
handleInput() {
console.log('Input value:', this.message);
}
}
3. change olay
Bu olay, seçim açılır menüsü veya onay kutusu gibi bir form öğesinin değeri değiştirildiğinde tetiklenir. Genellikle seçilen seçeneğe veya öğenin kontrol edilen durumuna göre eylemleri gerçekleştirmek veya verileri güncellemek için kullanılır.
<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 olay
Bu olay, bir düğme tıklanarak veya bir alan submit içinde Enter tuşuna basılarak bir form gönderildiğinde tetiklenir. Genellikle form gönderimlerini işlemek, kullanıcıyı doğrulamak ve API isteklerinde bulunma veya verileri kaydetme gibi eylemleri gerçekleştirmek input için kullanılır. input
<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 olay
Bu olay, bir tuşa basıldıktan sonra bırakıldığında tetiklenir. input Bir öğe listesini filtrelemek veya bir arama işlevini tetiklemek gibi klavyeye yanıt olarak eylemler gerçekleştirmek için yaygın olarak kullanılır .
<input v-model="message" v-on:keyup="handleKeyUp" />data() {
return {
message: ''
};
},
methods: {
handleKeyUp() {
console.log('Key up event triggered!');
}
}
6. keydown olay
Bu olay, bir tuşa basıldığında tetiklenir. Genellikle belirli tuş kombinasyonlarını dinlemek veya bir tuş basılıyken slayt gösterisinde gezinmek veya bir oyunu kontrol etmek gibi eylemler gerçekleştirmek için kullanılır.
<input v-model="message" v-on:keydown="handleKeyDown" />data() {
return {
message: ''
};
},
methods: {
handleKeyDown() {
console.log('Key down event triggered!');
}
}
7. mouseover olay
Bu olay, fare işaretçisi bir öğenin üzerine getirildiğinde tetiklenir. Bir öğenin üzerine gelindiğinde ek bilgi göstermek veya görsel geri bildirim sağlamak için yaygın olarak kullanılır.
<div v-on:mouseover="handleMouseOver">Hover over me</div>methods: {
handleMouseOver() {
console.log('Mouse over event triggered!');
}
}
8. mouseout olay
Bu olay, fare işaretçisi bir öğenin dışına taşındığında tetiklenir. Fare artık üzerlerine gelmediğinde öğeleri gizlemek veya değiştirmek için yaygın olarak kullanılır.
<div v-on:mouseout="handleMouseOut">Move mouse out</div>methods: {
handleMouseOut() {
console.log('Mouse out event triggered!');
}
}
9. scroll olay
Bu olay, bir öğe kaydırıldığında tetiklenir. Sonsuz kaydırma, içeriğin geç yüklenmesi veya UI öğelerinin konuma göre güncellenmesi gibi özellikleri uygulamak için yaygın olarak kullanılır scroll.
<div v-on:scroll="handleScroll">Scroll me</div>methods: {
handleScroll() {
console.log('Scroll event triggered!');
}
}
10. focus olay
Bu olay, bir öğe aldığında focus, genellikle tıklandığında veya kullanıcı klavyeyi kullanarak öğeye gittiğinde tetiklenir. input Bir veya öğe kazandığında eylemleri gerçekleştirmek veya görsel geri bildirim sağlamak için yaygın olarak kullanılır focus.
<input v-on:focus="handleFocus" />methods: {
handleFocus() {
console.log('Input focused!');
}
}
Bunlar, Vue.js'deki bazı temel olay örnekleridir. Olay işleme işlevlerini projenizin özel gereksinimlerine uyacak şekilde özelleştirebilirsiniz.