Vue Academy · Ders

v-on Olay Değiştiricileri

.stop, .prevent, .self, .once, .capture, .passive — her değiştiricinin ne zaman ve neden kullanılacağı.

v-on Olay Değiştiricileri, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Daha Temiz Olay Yönetimi

v-on yönergesi (kısa biçimi @) olay dinleyicileri ekler. Olay değiştiricileri, yayılımı durdurma veya varsayılan davranışları engelleme gibi yaygın DOM işlerini gerçekleştirir; böylece işleyicileriniz mantığa odaklanır.

Değiştiricilerin Çözdüğü Sorun

Değiştiriciler olmadan işleyicilerin içine DOM için gereken kalıp kodu serpiştirmeniz gerekir: event.preventDefault() veya event.stopPropagation() çağırmak gibi. Değiştiriciler bu işlemleri bildirime dayalı olarak şablona taşır.

.stop ile Yayılımı Durdurma

.stop, olayın üst öğelere yayılmasını durdurur — event.stopPropagation() çağırmaya eşdeğerdir.

<!-- inner click will not reach the outer handler -->
<div @click="onOuter">
  <button @click.stop="onInner">Click</button>
</div>

.prevent ile Varsayılanı Engelleme

.prevent, event.preventDefault() çağırır. Klasik kullanım alanı, gönderim sırasında bir formun sayfayı yeniden yüklemesini engellemektir.

<form @submit.prevent="onSubmit">
  <button type="submit">Save</button>
</form>

Değiştiricileri Birleştirme

Değiştiricileri birleştirebilirsiniz. Sıra önemlidir — soldan sağa uygulanırlar.

<a @click.stop.prevent="onClick">Link</a>

.self: Yalnızca Öğenin Kendisi

.self, işleyiciyi yalnızca olayın hedefi öğenin kendisi olduğunda çalıştırır; yukarı doğru yayılan bir alt öğe olduğunda çalıştırmaz. Kaplama arka planları için çok kullanışlıdır.

<!-- closes only when the backdrop itself is clicked -->
<div class="backdrop" @click.self="close">
  <div class="modal">...</div>
</div>

Tuş Değiştiricileri

Klavye olayları için belirli tuşları dinleyebilirsiniz. @keyup.enter yalnızca Enter tuşu bırakıldığında çalışır.

<input @keyup.enter="search" />

Daha Fazla Tuş Değiştiricisi

Vue, yaygın tuşlar için takma adlar sağlar: .enter, .esc, .tab, .delete, .space ve .up ile .down gibi ok tuşu değiştiricileri.

<input @keyup.esc="cancel" @keyup.up="previous" />

.once: İşleyiciyi Yalnızca Bir Kez Çalıştırma

.once, işleyiciyi en fazla bir kez çalıştırır ve ardından dinleyiciyi kaldırır. Karşılama mesajını bir kez kapatma gibi tek seferlik işlemler için kullanışlıdır.

<button @click.once="initialize">Start</button>

.passive ile Kaydırma Performansı

.passive, tarayıcıya işleyicinin preventDefault() çağırmayacağını bildirir. Böylece tarayıcı beklemeden akıcı biçimde kaydırma yapabilir ve dokunma ile kaydırma olaylarında performans artar.

<div @scroll.passive="onScroll">...</div>

Doğru Değiştiriciyi Seçme

.stop — yayılmayı durdurur.
.prevent — varsayılan davranışı engeller.
.self — yayılan alt öğe olaylarını yok sayar.
.once — bir kez çalışır.
.passive — varsayılan davranışı hiçbir zaman engellemez; daha iyi kaydırma performansı sağlar.

Not: .passive ile .prevent öğelerini hiçbir zaman birlikte kullanmayın — birbirleriyle çelişirler.

Hızlı Kontrol

Doğru değiştiriciyi seçin.

Özet

Olay değiştiricileri işleyicileri temiz tutar:

.stop = yayılımı durdurur, .prevent = varsayılan davranışı engeller.
.self yalnızca öğenin kendisinde çalışır.
.enter gibi tuş değiştiricileri belirli tuşları hedefler.
.once bir işleyiciyi bir kez çalıştırır; .passive kaydırma performansını artırır.

Sıkça Sorulan Sorular

“v-on Olay Değiştiricileri” dersi ücretsiz mi?

Evet — “v-on Olay Değiştiricileri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“v-on Olay Değiştiricileri” dersinde ne öğreneceğim?

.stop, .prevent, .self, .once, .capture, .passive — her değiştiricinin ne zaman ve neden kullanılacağı. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“v-on Olay Değiştiricileri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön