Vue.js Attribute Binding İşlemi
Hepinize merhaba dostlarım 😊. Yine gelip çatan bir pazar günü ve yine yeni bir makale ile karşınızda olan ben 😅.
Bu hafta farklı bir konu ile karşınızdayım. Uzun süredir makalesine ara verdiğim konu olan vue.js konusunu biraz ele almak istedim 😊. Bir önceki anlattığım Vue.js Data Binding konusunun devamı niteliğinde olan ve oldukça işimize yarayan Vue.js Attribute Binding konusununu bu yazımızda ele alacağız.
İçinizden şunu dediğinizi duyar gibiyim 😊
Hocam az çok çıkarım yaptık. Bu özellikleri vue.js üzerinde bağlamak olarak mı geçiyor ?
Aynen o şekilde dostlarım 😊. Sayfa içerisine gelecek olan verilerimizin özelliklerini (attributes) Vue.js nin bize verdiği bazı araçlar sayesinde ayarlayabiliyoruz 😊. Daha fazla çenem düşmeden hemen proje ortamlarımızı kuralım ve konumuza geçişimizi yapalım
v-bind:href Kullanımı
Eveeeeet geldik ilk kullanım kısmımıza dostlarım. İsminden de anlamışsınızdır href kısmını görünce. DÜşündüğünüz şey diyebilirim ciddi ciddi diyebilirim. Oluşturduğunuz <a> elementinin href kısmının ayarlanmasını gerçekleştirebilirsiniz. Hemen hızlı bir örnek yapalım dostları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 Attribute Binding İşlemi | MFSoftware Blog</title>
</head>
<body>
<div id="app">
<a v-bind:href="link" target="_blank">MFSoftware Blog</a>
</div>
<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 Attribute Binding İşlemi | MFSoftware Blog",
data : {
link : "https://mfsoftware.net"
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım. Fark ettiyseniz linkimizin href kısmına v-bind:href yazdık. Aslında burada verdiğimiz komut tam olarak şudur
Dostum senin yönleneceğin adres bu site olacak. Seni bu linkle Vue.js aracılığıyla bağladım 😊.
şeklindedir. Ekran çıktımıza baktığımızda ise
MFSoftware Blogçıktısı bizi karşılayacaktır. Artık linke bastığımızda da hedef siteye yönlenme işlemi sıkıntısız bir şekilde hallolacaktır 😊. Gelelim bir diğer konumuza 😊
v-bind:title Kullanımı
İsmini duyunca aslında hemen içinizden şunu diyorsunuz dostlarım anlıyorum ben sizi
Hocam sanırım bu derste sürekli olarak linkler üzerinden gideceğiz 😅. Olay öyle görünüyor
zamanında aldığım çalışma notlarına göre bir yol haritası çıkardım dostlarım ona göre ilerliyorum diyebilirim 😊. Güzel kısımlar da gelecek siz umudunuzu yitirmeyin sadece tek isteğim bu 😊
Bu kısımdaki kod ise dostlarım oluşturmuş olduğumuz <a> etiketine bir başlık ataması yapıyor. Yani elementimizin üzerine gelince oluşturduğumuz ismin görünmesini sağlıyoruz 😊. Hemen o halde daha fazla beklemeden kodlama üzerinde bunu gerçekleştirelim. Kodlama kısmımıza gelip
<!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 Attribute Binding İşlemi | MFSoftware Blog</title>
</head>
<body>
<div id="app">
<a v-bind:href="link" v-bind:title="title" target="_blank">MFSoftware Blog</a>
</div>
<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 Attribute Binding İşlemi | MFSoftware Blog",
data : {
link : "https://mfsoftware.net",
title : "MFSoftware Blog"
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazalım. Daha sonrasında ekranımıza gelip F5 tuşuna bastığımızda karşımıza gelen sonuç
MFSoftware Blogşeklinde olacaktır. Linkimize bastığımızda yeni bir sayfada MFSoftware Blog sitesi açılacaktır. Eğer yazı üzerinde beklersek de ufak bir kutucuk içerisinde MFSoftware Blog yazacaktır 😊. İşlemlerimiz on numara gidiyor şu an 😊. Hatta gelin hazır bu konudayken Link ismini de statik olarak yazmaktansa bize Vue.js nin nimetlerinden olan String Interpolation kullanarak yazdıralım. Hemen kodlama kısmımıza gelip
<!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 Attribute Binding İşlemi | MFSoftware Blog</title>
</head>
<body>
<div id="app">
<a v-bind:href="link" v-bind:title="title" target="_blank">{{ title }}</a>
</div>
<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 Attribute Binding İşlemi | MFSoftware Blog",
data : {
link : "https://mfsoftware.net",
title : "MFSoftware Blog"
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık. Ekranda sonucu yine aynı şekilde olacaktır değişen bir veri olmadı sadece linkimizin içindeki yazıyı değişkenden aldık dostlarım 😊.
Şimdiiiii gelelim bu işlerimizi pratikleştirmeye dostlarım. İçinizden şunu diyeceksiniz biliyorum dostlarım ben de ilk zamanlarda bunu sıklıkla söylemiştim 😅
Acaba bu yaptığımız işlemleri çok farklı bir yönden oop gibi yapma olayı mı hocam
yok hayır dostlarım o şekilde asla değil 😊. Özetle açacak olursam tamamen şu şekilde:
Biz hani uzun uzun v-bind yazıyoruz ya başlarına onun yerine : yazacağız. Bu Vue.js üzerinde binding komutu olarak geçiyor. Hemen kodlama kısmımıza geçişimizi gerçekleştirelim
<!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 Attribute Binding İşlemi | MFSoftware Blog</title>
</head>
<body>
<div id="app">
<a :href="link" :title="title" target="_blank">{{ title }}</a>
</div>
<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 Attribute Binding İşlemi | MFSoftware Blog",
data : {
link : "https://mfsoftware.net",
title : "MFSoftware Blog"
}
});
</script>
</body>
</html>şeklinde kodlarımızı düzelttik dostlarım 😊. Bu kısımdaki çıktı da yukarıdaki işlemlerdeki gibi birebir aynı olacaktır. Sadece binding komutlarını kısalttık dostlarım başka bir şey yok. Gelelim bir diğer kısmımıza dostlarım
v-bind:id Kullanımı
Evet evet yanlış duymadınız dostlarım 😊. Elementlerimize id tanımlama işlemlerinde bunu rahatlıkla kullanıyoruz. Nasıl diye soracak olursanız dostlarım bu da diğerleri gibi basit 😉. Hatta uzun uzun v-bind yazmaktansa binding operatörü ile yapalım hızlıca
<!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 Attribute Binding İşlemi | MFSoftware Blog</title>
</head>
<body>
<div id="app">
<a :href="link" :title="title" target="_blank">{{ title }}</a>
<p :id="id">ID Sakla</p>
</div>
<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 Attribute Binding İşlemi | MFSoftware Blog",
data : {
link : "https://mfsoftware.net",
title : "MFSoftware Blog",
id : 5
}
});
</script>
</body>
</html>şeklinde komutumuzu yazdık. Biraz daha özelleştirelim yani bunun id sini "secenek1","secenek2" gibi düzenleme işlemine 😊. Aslında şu an içinizden dediğiniz şeyi direkt olarak duydum
Hocam değişkenin içeriğini değiştiririz olur biter
Olup bitmiyor dostlarım 😊. Özellikle birde fazla veriniz varsa bunun için sürekli olarak değişken açmak sağlıklı bir yöntem olmayacaktır. Sadece değişecek olan kısmı alıp onu artırır ya da azaltabilirsiniz 😊. Hemen kodlama kısmımıza 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 Attribute Binding İşlemi | MFSoftware Blog</title>
</head>
<body>
<div id="app">
<a :href="link" :title="title" target="_blank">{{ title }}</a>
<p :id="'makale'+id">ID Sakla</p>
</div>
<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 Attribute Binding İşlemi | MFSoftware Blog",
data : {
link : "https://mfsoftware.net",
title : "MFSoftware Blog",
id : 5
}
});
</script>
</body>
</html>şeklinde kodumuzu yazalım dostlarım. Bu kodumuzu da yazdıktan sonra ise dostlarım ekran çıktımıza baktığımızda karşımıza
MFSoftware Blog
ID Saklaşeklinde sonuç gelecektir. Öğreyi denetle kısmından da ID Sakla kısmının koduna baktığımızda ise sonuç
<p id="makale5">ID Sakla</p>şeklinde olacaktır. Bütün işlemler bu kadar dostlarım 😊
Eveeeet dostlarım bu yazımda sizlere elimden geldiğince dilim döndüğünce Vue.js Attribute Binding 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. Onu da taşıdım 😀. Hatta taşıma süreci en meşakkatli olan site buydu ama değdi de güzel deneyim kattı bana 😊.
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer