Vue'nun v-on direktifi ile olay yönetiminizin seviyesini nasıl yükselteceğinizi öğrenin.
Kullanıcı olaylarını dinlemek, yanıt veren herhangi bir web uygulamasının ayrılmaz bir parçasıdır ve Vue uygulamaları da bir istisna değildir. Vue, v-on direktifi ile olayları işlemek için basit ve verimli bir yolla oluşturulmuştur.
Vue'da Olay Bağlama Nedir?
Olay bağlama, bir olay dinleyicisini bir olay dinleyicisine eklemenizi sağlayan bir Vue.js özelliğidir. Belge Nesne Modeli (DOM) eleman. Bir olay meydana geldiğinde, olay dinleyicisi, Vue uygulamanızda bir eylemi veya yanıtı tetikler.
Vue ile olay bağlamayı başarabilirsiniz. v-açık direktif. Bu yönerge, uygulamanızın tıklama, enter veya key-up etkinlikleri gibi kullanıcı etkinliklerini dinlemesine olanak tanır.
kullanarak bir öğeye bir olay dinleyicisi eklemek için v-açık, olay adını yönergeye bir parametre olarak ekleyin:
<html>
<KAFA>
<senaryokaynak=" https://unpkg.com/vue@3/dist/vue.global.js">senaryo>
KAFA>
<vücut>
<divİD="uygulama">
<düğmev-açık: tıklayın="sayaç++">Beni tıkladüğme>
<P>{{ tezgah}}P>
div>
<senaryo>
sabit uygulama = Vue.createApp({
veri() {
geri dönmek {
metin: "Vue harika!",
sayaç: 0
}
}
})
uygulama.montaj('#uygulama')
senaryo>
vücut>
html>
Yukarıdaki kod bloğu, bir videoyu dinleyen bir Vue uygulaması örneğini gösterir. tıklamak etkinlik. Kod bloğu bir kullanır düğme artırmak için tezgah Vue örneğinin data özelliğindeki değer birer birer.
Yukarıdaki kod bloğu, JavaScript ifadesini bağlar sayaç++ düğmeye tıklamak ile olay v-açık direktif. Vue'nun kullandığı @ yerine bir kısaltma olarak karakter v-açık nedeniyle direktif v-açıksık kullanımı:
<düğme @tıklamak="sayaç++">Beni tıkladüğme>
Vue'daki olay bağlama, tıklama olaylarıyla sınırlı değildir. Vue, tuşa basma olayları, fareyle üzerine gelme olayları ve daha fazlası gibi diğer olayları yönetir.
Bu olaylardan herhangi birini bağlamak için v-açık direktifi değiştir tıklamak istenen olayın adıyla olay:
<düğme @keydown.enter="sayaç++">Beni tıkladüğme>
Yukarıdaki kod, üzerinde bir olay dinleyicisi kurar. düğme için dinleyen tuş takımı etkinlik. Düğme odaktayken herhangi bir tuşa basıldığında Vue, sayaç++ ifade.
Çoğu Vue uygulamasında, meydana gelen belirli olaylara dayalı olarak daha karmaşık mantığı işleyebilirsiniz. Olaylar ve yöntemler, bir olaya dayalı olarak uygulama eylemleri gerçekleştirmek için el ele çalışır.
içindeki method özelliği Vue'nun Seçenekler Nesnesi gelişmiş reaktivite için Vue uygulamanızın ihtiyaç duyduğu önemli işlevleri barındırır. Vue'daki method özelliği ile olaylara dayalı karmaşık mantığı işleyebilirsiniz.
Method özelliği tarafından işlenen olayları gösteren bir Vue uygulaması örneği:
<html>
<KAFA>
<senaryokaynak=" https://unpkg.com/vue@3/dist/vue.global.js">senaryo>
KAFA>
<vücut>
<divİD="uygulama">
<düğme @tıklamak="artış">1 ekledüğme>
<düğme @tıklamak="azaltmak">1 azaltmakdüğme>
<P>{{ tezgah }}P>
div>
<senaryo>
const uygulaması = Vue.createApp({
veri() {
geri dönmek {
text: 'Vue harika!',
sayaç: 0
}
},
yöntemler: {
artış () {
this.counter = this.counter + 1
},
azaltmak() {
this.counter = this.counter - 1
}
}
})
app.mount('#uygulama')
senaryo>
vücut>
html>
Yukarıdaki Vue uygulaması, olayların yöntemlerle nasıl ilişkilendirileceğini gösterir. Uygulamada, kullanıcıların data özelliğindeki sayaç değerini artırmak veya azaltmak için tıklayabilecekleri iki düğme vardır.
Uygulama bunu şununla başarır: @tıklamak direktif. bu @tıklamak yönerge, sayaç değerini işlemek için method özelliğindeki işlevlere işaret eder.
Bir bağımsız değişkeni click olayına bağlarken, yönteme ilettiğiniz bağımsız değişkene göre sayaç değeri eklemek veya azaltmak için artırma ve azaltma yöntemlerini özelleştirebilirsiniz.
Şöyle:
<vücut>
<divİD="uygulama">
<düğme @tıklamak="artırma (5)">5 ekledüğme><düğme @tıklamak="azalt (3)">3 azaltmakdüğme>
<P>{{ tezgah }}P>
div><senaryo>
const uygulaması = Vue.createApp({
veri() {
geri dönmek {
text: 'Vue harika!',
sayaç: 0
}
},
yöntemler: {
artış (sayı){
this.counter = this.counter + num
},
azalt (say) {
this.counter = this.counter - sayı
}
}
})
app.mount('#uygulama')
senaryo>
vücut>
Bu kod bloğu, düğmedeki tıklama olay dinleyicisine bağlı yöntemlere argümanların iletilmesine izin vermek için önceki Vue uygulamasında uzanır.
Vue örneğindeki artırma ve azaltma yöntemleri, counter özelliğini artırmak veya azaltmak için bir bağımsız değişken num alır.
Bu örnek, yöntemleri Vue'daki olaylarla bağlarken bağımsız değişkenlerle nasıl çalışabileceğinizi gösterir. Yöntemleri olaylarla ilişkilendirmek, Vue uygulamalarını daha etkileşimli hale getirmeye yardımcı olabilir.
Vue'da Önleme ve Durdurma Değiştiricilerini Keşfetme
Vue'daki olay değiştiriciler, uygulamanızın özel ihtiyaçlarını karşılayan daha iyi olay dinleyicileri oluşturmanıza olanak tanır. Bu olay değiştiricileri kullanmak için, değiştiricileri Vue'daki olaylara zincirlersiniz.
Örneğin:
<biçim @gönder.önle="işleGönder">
<giriştip="metin"v modeli="metin">
<düğmetip="göndermek">Göndermekdüğme>
biçim>
Yukarıdaki kod bloğu, önlemek gönder olayı için değiştirici. bu önlemek değiştirici, Vue'daki formlarla çalışırken yaygın olarak kullanılır.
bu önlemek değiştiricinin amacı, sayfayı yeniden yüklemek olan form gönderiminin varsayılan davranışını engellemektir. kullanma önlemek, Vue işlemlerine devam edebilir. işlemeGönder yöntem, form gönderimiyle ilgilenir.
Çok kullanışlı bir değiştiricinin başka bir örneği, durmak olay değiştirici bu durmak olay değiştirici, bir olayın DOM ağacında daha yukarılara yayılmasını durdurur.
Genellikle, bir HTML alt öğesinin olayı, üst öğelere eklenmiş herhangi bir olay dinleyicisini etkinleştirerek DOM ağacında baloncuklar oluşturur. bunu engelleyebilirsin olay yayılımı ile durmak değiştirici ve olayın başka olay dinleyicilerini tetiklemesini önleyin.
nasıl olduğunu anlamak için durmak değiştirici, olayların yayılmasını bir DOM ağacının yukarısında durdurur, aşağıdaki kod bloğunu göz önünde bulundurun:
<vücut>
<divİD="uygulama">
<div @tıklamak="dış Tıklama"sınıf="dış">
<div @tıklayın.durdur="iç Tıklama"sınıf="iç">
<düğme @tıklamak="düğmeye tıklayın"sınıf="düğme">Beni tıkladüğme>
div>
div>
div>
<senaryo>
const uygulaması = Vue.createApp({
yöntemler: {
dış Tıklama() {
console.log('Dış tıklama')
},
innerClick() {
console.log('İç tıklama')
},
düğmeClick() {
console.log('Düğme tıklaması')
}
}
});
app.mount("#uygulama");
senaryo>
vücut>
Yukarıdaki kod bloğu, üç farklı öğeye bağlı üç olay dinleyicisine sahiptir. bu düğme eleman, div'in içinde iç sınıf, div ile iç sınıf, div'in içinde dış sınıf.
Üç öğenin her biri bir tıklamak olay ve günlükleri konsola, tıklanan HTML öğesinin adı. Aşağıda, yukarıdaki kod bloğunun anlaşılmasını kolaylaştırmak için ek sınıf CSS stili verilmiştir:
<KAFA>
<stil>
.dış {
dolgu: 20 piksel;
arka plan rengi: siyah;
}
.iç {
dolgu: 20 piksel;
arka plan rengi: gri;
}
düğme {
dolgu: 10 piksel;
arka plan rengi: beyaz;
kenarlık: 2px düz siyah;
yazı tipi boyutu: 16 piksel;
yazı tipi ağırlığı: kalın;
imleç: işaretçi;
}
stil>
KAFA>Programı çalıştırırken, oluşturulan Vue uygulaması şöyle görünecektir:
Düğmeye tıkladığınızda, programın düğmeTıklayın yöntemini kullanır ve konsola bir mesaj kaydeder. Program aynı zamanda iç Tıklama yöntem.
Ancak, program çağrı yapmaz dış Tıklama yöntem çünkü kod bloğu bir durmak değiştirici iç Tıklama olay dinleyicisi Bu, olayın DOM ağacında daha yukarılara yayılmasını durdurur.
olmadan durmak değiştirici, program arayacak düğmeTıklayın yöntemini tıklayın ve olay ağaçta yukarıya doğru yayılmaya devam edecek ve iç Tıklama yöntem ve ardından dış Tıklama yöntem.
Web Uygulamalarında Olayları Yönetme
Öğelere olay dinleyicileri eklemek için Vue'da olay bağlamayı nasıl kullanacağınızı ve olaylar meydana geldiğinde yöntemleri nasıl çağıracağınızı öğrendiniz. Ayrıca, olay davranışını özelleştirmek için olay değiştiricileri nasıl kullanacağınızı da anladınız.
Web uygulamaları, işlevleri yerine getirmek için bir tür kullanıcı etkinliğine güvenir. JavaScript, bu olayların çeşitliliğini yakalamak ve işlemek için birçok yöntemle yerleşik olarak gelir. Bu etkinlikler etkileşimli uygulamalar oluşturmaya yardımcı olur.