Vue.js HTML, CSS ve Javascript bilgisiyle içinde web uygulamaları oluşturmaya başlayabileceğimiz çok güçlü, öğrenmesi kolay ve ulaşılabilir bir kitaplıktır. Vue.js, halihazırda mevcut olan Angular ve tepki Çerçevelerinden en iyi özelliklerin birleştirilmesiyle oluşturulmuştur. UI'ler (Kullanıcı Arayüzleri) ve SPA'lar (Tek Sayfa Uygulamaları) oluşturmak için kullanılan ilerici ve reaktif bir Javascript çerçevesidir, bu nedenle geliştiriciler Vue.js'de uygulama geliştirirken kodlamayı ve özgürlüğü ve rahatlığı hissetmeyi severler. Vue.js'deki Olay Dinleme ve İşleme'ye bir göz atın, olayları dinlemek ve işlemek için bir v-on yönergesi sağladığını bileceğiz. DOM'yi dinlemek ve gerekli görevleri gerçekleştirmek için v-on yönergesini kullanabiliriz. Ayrıca birçok olay işleyici sağlar. Ancak bu yazıda sadece tıklama olaylarını öğrenecek ve odak noktamızı koruyacağız. Öyleyse başlayalım!
Javascript'in onClick olayı gibi, Vue.js de dinleme olayları için v-on:click sağlar.
v-on:click olayının sözdizimi şöyle olacaktır:
< buton v-on:tıklayın='fonksiyon adı'>Tıklamak</ buton >
Vue.js, v-on kullanmak yerine @ bir steno sağlar.
< buton @Tıklayın='fonksiyon adı'>Tıklayın</ buton >
Vue.js, yalnızca click olayını dinlemek ve işlevi çağırmakla kalmaz. Ayrıca herhangi bir aritmetik işlemi veya Javascript ile ilgili herhangi bir şeyi tırnak işaretleri içine doğrudan yazmamıza da izin verecek. Aynen böyle:
< buton @Tıklayın='sayı += 1'>Ekle</ buton >
Vue.js, aşağıda gösterildiği gibi bir satır içi Javascript deyiminde yöntemi veya işlevi çağırmamızı sağlar:
< buton @Tıklayın='mesaj('Merhaba')'>Göster</ buton >Vue.js'nin olay işleyicilerini kullanarak, aşağıdaki örnekte olduğu gibi, Vue.js'nin özellikle sağlanan $event değişkenini yöntemin argümanına geçirerek satır içi ifadeyi kullanarak DOM olayına da erişebiliriz:
< buton @Tıklayın='mesaj('Merhaba', $event)'>Gönder</ buton >
Vue.js ayrıca birden çok işlevi veya yöntemi çağırmamızı sağlar. Birden fazla işlevi çağırabilir ve bu örnekte olduğu gibi virgülle ayırabiliriz:
< buton @Tıklayın='birinci('Merhaba'), ikinci('Merhaba', $event) '>Gönder</ buton >Vue.js, olay değiştiricileri de sağlar.
Olay Değiştiriciler
Genellikle olaylarla birlikte değiştiricileri çağırmamız gerekir. Bu nedenle, Vue.js aşağıdaki değiştiricilerden bazılarını sağlar:
.Dur
Click olayının iletimini durduracaktır.
< ile @click.stop='Bunu yap'></ ile >.önlemek
Sayfanın yeniden yüklenmesini veya yönlendirilmesini engeller.
< biçim @gönder.önle='Gönderildiğinde'></ biçim >.bir Zamanlar
Click olayını yalnızca bir kez tetikleyecektir.
< ile @click.once='Bunu yap'></ ile >.ele geçirmek
Çoğunlukla olay dinleyicisini eklemek için kullanılır.
< div @click.capture='Bunu yap'> ...</ div >Değiştiricileri de zincirleyebiliriz. Ancak, değiştiricilerin sırasının önemli olduğunu ve sonuçları etkileyeceğini unutmayın.
< ile @click.stop.prevent='yap bunu'></ ile >Çözüm
Bu yazıda, noob seviyesinden ninja seviyesine kadar tüm Click olay işleme kavramlarını ele aldık. Tıklama olaylarını yazmanın farklı sözdizimlerini ve |_+_| kullanmanın farklı yollarını öğrendik. geliştiricilerin ve farklı olay değiştiricilerin kolaylığı için Vue.js tarafından sağlanan yönerge. Bunun gibi Vue.js ile ilgili daha faydalı içerikler için linuxhint.com'u ziyaret etmeye devam edin.