Vue.js Style Binding Kullanımı
Hepinize merhaba dostlarım 😊. Yine yeni bir makale ile tekrardan karşınızdayım 😉. Biliyorsunuz vue serüvenimize kaldığımız yerden son hızla devam ediyoruz bunu siz değerli okuyucu dostlarım daha iyi biliyorsunuz 😊. Bu haftanın makalesi biliyorsunuz biraz geç geldi farkındayım. Önemli bir durum sebebiyle kısa süreli şehir değişikliği yaptığımdan dolayı biraz aksadı gibi ama makale yazmama engel olamadı 😊.
Yine çenem düştü ve konuşma uzayacak gibi oldu her neyse 😅. Sizin içinizde olan soruya gelecek olursak
Hocam bu makalede ne anlatacaksınız aşırı merak ettik 😊
şeklinde şu anda düşünüyor olabilirsiniz. Öğrenme sürecindesiniz ve bu şekilde soruları sormanız inanılmaz güzel dostlarım anlıyorum sizi 😊. Bu makalemde sizlere "Vue.js Style Binding Kullanımı" konusundan bahsedeceğim ve birkaç ufak örnekle işi bitireceğiz. Çok uzun bir konu değil dostlarım işin teorik kısmından çok mantığını anlatacağım için hızlıca kavrayacağınızı garanti ediyorum. O halde hemen konumuza girelim
Nedir Bu Style Binding ?
Eveeeet artık konumuza yavaştan girelim dostlarım 😊. İsminden de anlayacağınız üzere Style Binding yani stil bağlama işlemi bizim componentimiz üzerinde bir elementimize stil tanımlaması yapmamıza olanak sağlıyor. Normalde hani biz elementlere ne yapıyorduk misal
<div style="color: blue; font-size:15px">MFSoftware Blog</div>şeklinde ayarlamalar gerçekleştiriyorduk farkındaysanız 😊. Bunu Vue.js ile ayarlayacağımız durumda bize şöyle bir olanak sağlanıyor
Dostum hiç bunlara gerek yok. Sadece bir data() objesi oluştur ve içerisinde stil objesi tanımla. Onun da içinde stil özelliklerini belirt ve bağla :)
şeklinde bize pratik bir yol sunuyor. Bu aslında güzel bir şey. Yani ileriki zamanlarda data() objesi içerisinde ayarlamaları hızlıca gerçekleştiriyoruz.
O halde hemen editörümüzü açalım ve proje ç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 Style Binding İş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 Style Binding İşlemi | MFSoftware Blog",
data: {}
});
</script>
</body>
</html>şeklinde proje çatımızı oluşturduk dostlarım. Bu kısma kadar çok güzel gidiyoruz. Hemen içerisine gelip h2 tagleri arasında MFSoftware Blog yazısı yazdıralım ekranımıza. Kodumuza 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 Style Binding İş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">
<!-- METNIMIZI YAZDIRALIM -->
<h2>MFSoftware Blog</h2>
</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 Style Binding İşlemi | MFSoftware Blog",
data: {}
});
</script>
</body>
</html>şeklinde app id'sine sahip olan divlerin arasına yazdık. Ekranımıza geldiğimizde karşımıza gelecek olan çıktı
şeklinde bir çıktı olacaktır. Şimdi bu yazının arka planı mavi, yazı rengi beyaz ve her taraftan da %2 padding değeri verdirelim dostlarım. Kodlarımızı hemen açalım ve
<!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 Style Binding İş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">
<!-- METNIMIZI YAZDIRALIM -->
<h2 :style="styleObj">MFSoftware Blog</h2>
</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 Style Binding İşlemi | MFSoftware Blog",
data: {
styleObj : {
backgroundColor : "blue",
color : "white",
padding : "3%"
}
}
});
</script>
</body>
</html>şeklinde kodlarımızı düzenleyelim. Bu kısımda dikkatinizi çekeceğim bir yer var. Normalde
style="color: white;"olarak tanımlama yaparken vue üzerinde
:style=""olarak bir binding yapmamıza olanak sağlandı. Ve ek olaraktan dostlarım stil özellikleri "Camel Case" formatında tanıtıldı. Bu kısma kadar tamamsak dostlarım ekranımıza gelecek olan çıktı
şeklinde ekranımıza bastırıldı dostlarım 😊
Eveeeet dostlarım bu yazımda sizlere elimden geldiğince dilim döndüğünce "Vue.js Style Binding" konusunun anlatmaya çalıştım. Umarım faydalı olmuşumdur. Bu konu diğer vue makalelerinden biraz kısa olmuştur dostlarım anlıyorum çünkü bu konu kısa bir konu üzerinde daha fazla durmak da istemedim 😊
Konu başlarda biraz karmaşık veya zoe gelmiş olabilir dostlarım anlıyorum. Özellikle öğrenme sürecinde bunların olması doğaldır kendinize kasıntı konusu etmeyin. Bu süreç içerisinde sizlerden istediğim tek şey her makalemin sonunda 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 😊
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer