Vue.Js Event Handling İşlemi
Hepinize merhaba dostlarım 😊. Hızlı geçen bir haftanın içerisinde ve youtube mecrasına da adım atmamın mutluluğu ile tekrardan karşınızdayım. Lakin bu sefer hafta sonu değil hafta içi blog yazmak istedim. Hafta sonunda birtakım ufak işlemlerim olduğu için sizlere makalemi erkenden ulaştırmak istedim diyebilirim 😊.
Bu sürece kadar aslında server olayları, centos olayları, laravel olayları derken vue.js konusuna birazcık ara verdik gibi bir durum söz konusu olmuştu. Ben de hali hazırda erkenden blog yazayım diye ayağa kalktığımda vue konusu ile makale yazmak istedim. Hem de en seveceğiniz konulardan dostlarım 😉. Şimdi içinizden şunu diyorsunuzdur ben seziyorum
Hocam yoksa method işlemlerinden mi bahsedeceksiniz ? Eğer konu buysa bizi inanılmaz mutlu edersiniz valla
şeklinde heyecan belirtili cümleler geçiyordu ben anlıyorum. İlk zamanlarda bende de aynı durum olmuştu çünkü aşırı mutlu eder, hatta konuyu daha hızlı anlamanızda olanak sağlar 😊. Çenem düştü kusuruma bakmayın dostlarım cevabım şu olacaktır sizlere
Evett! Hatta ufak örnekler de yapacağız bu konuda 😊
diye cevabımı verip artık sözümü daha fazla uzatmadan "Vue.js Üzerinde Event Handling İşlemi" konuma giriş yapmak istiyorum 😊. O halde sözü daha fazla uzatmadan dostlarım konumuza giriş yapalım ama öncesinde ufak bir anlatım gerçekleştirmek istiyorum
Nedir Bu Event Handling ? Kullanmak Zorunda Mıyız ?
Eveeeet geldik artık muhteşem konumuzun açıklanmasına. Dostlarım proje geliştirirken karşımıza sürekli olarak gelmiştir değil mi özellikle hani web alanında diye demiyorum her alanda ufak da olsa methodlarla fonksiyonlarla işlemlerimiz haliyle oluyor buna kalkıp da "Ben fonksiyon olmadan bütün işlemlerimi yapıyorum" diye söyleyemeyiz 😊.
En basitinden mesela crud işlemleri için fonksiyon, api işlemleri için fonksiyon yazmamız gerekebiliyor ki bunu belirli yerlerde tetikleyip çağırabilelim. Ha bunu yapmazsak her yerde uzun uzun yazmamız gerekebiliyor bu da yazılımcılığa aykırı bir durum hepimiz biliyoruz 😊. Ha fonksiyonsuz yapılan projeler var mı derseniz de şu an çok fazla denk gelmesek de var sadece one page bir tasarıma statik verileri koyarsınız olur biter ama bu da pek hitap etmez kullanıcıya. Düşünsenize hiçbir şey değişmiyor etmiyor 😅. Çok can sıkan bir durum olur.
İşte dostlarım bunun aynısı vue için de geçerli. Dediğim gibi veri tabanı, api işlemleri vs olsun hatta bunu da geçelim birden fazla yerde kullanacağımız methodlar olabilir sayfa içerisinde vs bunları oturup uzun uzun yazacak mıyız ? ASLA BU HATAYA DÜŞMEYECEĞİZ 😊. BİR FONKSİYON OLUŞTURUP İŞLEMLERİ BUNUN ÜZERİNDE GERÇEKLEŞTİRECEĞİZ
mottosu ile işlemleri gerçekleştirebiliriz.
Kullanmak zorunda mıyız konusuna gelecek olursak dostlarım verilerle, apilerle işiniz vs olursa veya statik olarak butonlara basınca proje üzerinde belirli birkaç yerlerin değişmesini vs istiyorsak "Evet Kullanmak Zorundayız" diyebilirim. Ama beliri bir aksiyon almayıp da sadece o şekilde kalacaksa tasarım olarak mesela "Hiç gerek yok o durumlarda" diyebilirim
Kodlama Kısmına Geçelim
Artık çok daha fazla konuşmamı uzatıp sizlerin değerli vaktini almak istemiyorum. Hızlıca kodlama kısmımıza geçelim dostlarım. Hemen bir index.html isminde proje dosyası oluşturalım ve aşağıda sizlere vereceğim kodları içerisine yapıştırarak çatımızı oluşturalım
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Event Handling İşlemi | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Event Handling İşlemi | MFSoftware Blog",
data: {}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım. Şimdi 2 tane buton oluşturup dostlarım birisinde "Blog Sayfası Linki" , diğerinde de "Seyyar Yazılımcı Linki" yazısı yazsın. Üzerinde tıklanınca bize bu linkleri versin. Hemen kodlama kısmına geçelim.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Event Handling İşlemi | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container mt-5">
<div class="col-md-12 alert alert-success text-center" v-if="blogLink!=''">
Blog Link: <b>{{ blogLink }}</b>
</div>
<div class="col-md-12 alert alert-info text-center mt-3" v-if="seyyarLink!=''">
Seyyar Yazılımcı Link: <b>{{ seyyarLink }}</b>
</div>
<hr>
<div class="row">
<button class="btn btn-success btn-sm">Blog Sayfasını Göster</button>
<button class="btn btn-info btn-sm ml-3">Seyyar Yazılımcı Sayfasını Göster</button>
</div>
</div>
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Event Handling İşlemi | MFSoftware Blog",
data: {
blogLink : '',
seyyarLink : ''
},
methods : {
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım. Ekran görüntüsünü de sizlerle paylaşayım hızlıca
şekildeki gibi bir görüntü geliyor dostlarım karşımıza. Şimdi içinizden diyorsunuzdur
E Hocam biz butona basınca hiçbir şey değişmiyor ki şu an 😅. Nasıl olacak bu iş
diye düşünüyorsunuzdur. Henüz bu değişim kodlarını yazmadık daha dostlarım. Gelelim bu kısmın kodlarını da yazmaya
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Event Handling İşlemi | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container mt-5">
<div class="col-md-12 alert alert-success text-center" v-if="blogLink!=''">
Blog Link: <b>{{ blogLink }}</b>
</div>
<div class="col-md-12 alert alert-info text-center mt-3" v-if="seyyarLink!=''">
Seyyar Yazılımcı Link: <b>{{ seyyarLink }}</b>
</div>
<hr>
<div class="row">
<button class="btn btn-success btn-sm">Blog Sayfasını Göster</button>
<button class="btn btn-info btn-sm ml-3">Seyyar Yazılımcı Sayfasını Göster</button>
</div>
</div>
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Event Handling İşlemi | MFSoftware Blog",
data: {
blogLink : '',
seyyarLink : ''
},
methods : { // METHODLARIMIZI BURADA TANIMLADIK !!!
getBlog(){
this.blogLink = "https://mfsoftware.net";
},
getSeyyar(){
this.seyyarLink = "https://seyyaryazilimci.com";
}
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazalım. Dikkat ettiyseniz dostlarım "methods" bloğu içerisinde bütün fonksiyonlarımızı yazmış bulunduk. Şimdi tekrardan diyorsunuz içinizden
E hocam yine değişmedi bu işlem bu kadar uzun olmamalı aslında 😅.
dediğinizi seziyorum. En önemli kısma geldik yani değiştirme kısmına dostlarım. Burada aslında 2 farklı kullanımdan istediğimizi kullanabiliriz dostlarım. Hemen gösteriyorum
<!-- V-ON KULLANIMI -->
<div class="row">
<button class="btn btn-success btn-sm" v-on:click="getBlog">Blog Sayfasını Göster</button>
<button class="btn btn-info btn-sm ml-3" v-on:click="getSeyyar">Seyyar Yazılımcı Sayfasını Göster</button>
</div>
<!-- @ KULLANIMI -->
<div class="row">
<button class="btn btn-success btn-sm" @click="getBlog">Blog Sayfasını Göster</button>
<button class="btn btn-info btn-sm ml-3" @click="getSeyyar">Seyyar Yazılımcı Sayfasını Göster</button>
</div>şeklinde iki ayrı kullanım var. İsterseniz v-on:click şeklinde kullanabilirsiniz, isterseniz de @ karakterini kullanabilirsiniz. Şimdi içinizden şunu diyeceksiniz dostlarım ben seziyorum
Hocam v-bind komutununa biraz benziyor da v-on komutunu biraz daha açabilir misiniz. Hatta @ komutunu da açarsanız seviniriz 😊
siz yeter ki isteyin dostlarım hemen açıklıyorum bunu sizin için 😊.
Dostlarım konunun özü şu. Normalde biz daha önceki konularda sizin de dediğiniz gibi v-bind komutunu defalarca kullandık. Bu komutun asıl amacı elementler ve vue üzerinde veri bağlama olayı diye geçiyor genelde. Mesela bir p etiketine olsun vs farketmez. Veri bağlama durumlarında bu komutu kullanabiliriz.
Lakin
Herhangi bir event olayları yakalayacağımızda mesela bu örnekteki gibi olduğunu varsayarsak. Bizim o değişikliği yapmak istediğimiz zamanlarda v-on: yazıp hangi eventi atacağımızı söyleyebiliriz. Siz @ komutunu da sormuştunuz ya dostlarım @ komutu aslında bizim uzun uzun v-on: yazma işleminden kurtarıyor. @click="" yazarak biz aslında v-on:click="" demiş oluyoruz 😊. Bütün olay bundan ibaret
Eveeeet dostlarım artık gelelim projemizi çalıştıralım. Ekranımıza gelecek olan çıktıda butonlarımıza basınca
şeklindeki gibi sonuç bizi karşılayacaktır dostlarım 😊. İşte bütün olay bu kadar basit. Her şey bir tık uzağımızda 😉.
Eveeeet dostlarım bu yazımda sizlere elimden geldiğince dilim döndüğünce Vue.js Event Handling İşlemi konusundan elimden geldiğince dilim döndüğünce bahsettim. Umarım faydalı olmuşumdur. Konu başlarda biraz karmaşık gelebilir. Hani her ne kadar da her yazımda basit dememin yanısıra karmaşık olan yanları illa ki vardır yeni öğrenen dostlarım için. Aynı yollardan geçtiğim için biliyorum anlıyorum 😊. Bu aşamada yapmanızı istediğim tek şey her yazımda da dediğim gibi "İstikrarlı ve Azimli Olmalısınız, Bolca Pratik Yapmalısınız 😊". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır.
Aynı zamanda 25 Aralık 2022 de kurmuş olduğum seyyaryazilimci.com soru cevap sitesi de yayında dostlarım haberiniz olsun. Her zaman dediğim gibi sorular ve cevaplar belirli bir süre admin onayından geçerek sistem üzerinde yayınlanmaktadır dostlarım bilginiz olsun😊.
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer