Vue.js Class Binding İşlemi
Hepinize merhaba dostlarım 😊. Artık malum gün geldi ve yi,ne karşınzıda ben varım 😉. Özellikle kış mevsiminin gelip çatmış olması ile bende oluşan hafif mod düşüklüğüne inat yine yeniden karşınızda olmak için kendimle var gücümle mücadele ediyorum. Gerek hasta olsam gerek modum düşük olsa da içerik çıkartmaya devam ediyorum 😊. Çenem düştü farkındayım 😅
Konuyu daha fazla uzatmadan dostlarım bir önceki makalem olan Vue.js Attribute Binding olayına benzeyen yapıdan yani "Vue.js Class Binding" yapısından bahsedeceğim 😊
Şimdi bazı dostlarımın aklına gelmiş olan soru ayalr önce benim de aklıma gelmişti. Siz de aynı şu şekilde düşünüyorsunuz eminim
Hocam bu konunun isminden attribute binding konusuna az çok kulak aşinalığı mıdır nedir bir durum var ya aynen onu yaşıyoruz. Ona benzer bir durum mu bu ?
Aynen öyle dostlarım. Lakin bu onun class hali diyebilirim. Yani istediğiniz elementlere istediğiniz class özelliğini rahatlıkla bağlayabilirsiniz, şekillendirebilirsiniz. Tamamen size kalmış bunlar 😊
O halde sözü daha fazla uzatmadan hemen proje dosyamızı oluşturalı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 Class 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 Class Binding İşlemi | MFSoftware Blog",
data: {}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım. Proje dosyasında ben hem basitlik hem de pratiklik olsun diye bootstrap class larını kullanıp onlar üzerinden örnek göstereceğim. Siz isterseniz kendiniz class oluşturup onları da bağlayabilirsiniz 😊. Hemen konuya geçelim dostlarım vakit kaybetmeden
Tekli Class Bağlama
Eveeeet geldik dostlarım artık konumuza. Özellikle ve özellikle dostlarım bunu sektörde e ticaret alanlarında görebilirsiniz 😊. Fatura modüllerinde yeni gelen faturalar kısmında yeni gelmiş bir fatura ise arka kısmında hafif sarı renk verme durumunuz olabilir duruma göre. Gelin bunu hep beraber Vue.js üzerinde gerçekleştirelim.
Vue.js üzerinde bu işlemi gerçekleştirmek için aynı bir önceki makalemde olduğu Binding komutlarından olan ":" ibaresini kullanacağız. Burada class üzerinden işlem yapacağımız için ":class" şeklinde bir tanımlama gerçekleştireceğiz 😊
Bunun için kullanıcıya bir select option verelim ve bunun üzerinden dinamik bir şekilde değiştirebilsin. Hemen kodlama kısmına geçiyorum
<!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 Class 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 class="container">
<select class="form-control my-3" v-model="checkedClass">
<option value="alert alert-success">Başarılı</option>
<option value="alert alert-danger">Hata</option>
<option value="alert alert-warning">Uyarı</option>
<option value="alert alert-info">Bilgi</option>
</select>
<div :class="checkedClass">
MFSoftware Blog
</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 Class Binding İşlemi | MFSoftware Blog",
data: {
checkedClass : ''
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım. Bu kısımda class ibare select option kısmından seçilen değere göre MFSoftware Blog yazısının arka planı anlık olarak değişecektir 😊. Bütün işlemler bu kadar. Gelelim bir diğer kısmımıza dostlarım 😊
Çoklu Class Bağlama
Eveeet aklınızdan geçen soruya cevap niteliğinde olan konuyla karşınızdayım tekrardan dostlarım 😊. Özellikle de sizin sürekli sorguladığınız soru tam olarak şuydu dostlarım
Hocam tamam class bağlayabiliyoruz ama biz atıyorum 2 tane bağlamak istedik. Bunu nasıl yapabiliriz ?
Çözüm o kadar basit ki dostlarım. Görünce ciddi ciddi diyorum "Bu kadarcık mıydı" diyeceğinize adım gibi eminim 😅. Hemen kodlama kısmımızı açalım ve kodlarımızı yazmaya başlayalı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 Class 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 class="container">
<select class="form-control my-3" v-model="checkedClass">
<option value="alert alert-success">Başarılı</option>
<option value="alert alert-danger">Hata</option>
<option value="alert alert-warning">Uyarı</option>
<option value="alert alert-info">Bilgi</option>
</select>
<div :class="checkedClass">
MFSoftware Blog
</div>
<hr>
<h3 class="my-3">Çoklu Class Bağlama</h3>
<div :class="[firstClass,secondClass]">
Seyyar Yazılımcı
</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 Class Binding İşlemi | MFSoftware Blog",
data: {
checkedClass : '',
firstClass : 'alert alert-info',
secondClass : 'col-md-4'
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazalım dostlarım. Gördüğünüz üzere 2 farklı class tanımladık. Ve bunları normalde direkt yazmak yerine bir dizi içerisine aldık ve bu şekilde hızlıca ayarlamış olduk 😊. Bütün işlemler bu kadar basit dostlarım. Hepsi hızlı ve pratik 😊. Bir soru daha siz sormadan ben size sormak istiyorum
Dostlarım biz 2 tane class için ayrı değişken oluşturduk ve bunu oradan aldık. Harici bir class daha verelim ama bunu değişken oluşturmadan verelim mi ?
Cevabınız tabii ki evet olacaktır 😊. Çünkü yeni bir bilgi öğrenmenin tadı çok başkadır. Bunun için yapacağımız tek şey dostlarım harici olarak (değişken oluşturmadan vereceğimiz class) vereceğimiz class'ı bir string içerisinde yazmamız gereklidir. Hemen bunu 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 Class 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 class="container">
<select class="form-control my-3" v-model="checkedClass">
<option value="alert alert-success">Başarılı</option>
<option value="alert alert-danger">Hata</option>
<option value="alert alert-warning">Uyarı</option>
<option value="alert alert-info">Bilgi</option>
</select>
<div :class="checkedClass">
MFSoftware Blog
</div>
<hr>
<h3 class="my-3">Çoklu Class Bağlama</h3>
<!-- yazıyı ortalamak için bunu normal string içerisinde gerçekleştirdik -->
<div :class="[firstClass,secondClass,'text-center']">
Seyyar Yazılımcı
</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 Class Binding İşlemi | MFSoftware Blog",
data: {
checkedClass : '',
firstClass : 'alert alert-info',
secondClass : 'col-md-4'
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım. İşlemler tamamen bu kadar 😊. Çok hızlı bir şekilde işlemlerimizi gerçekleştirdik. Yazının en başında da bahsettiğim gibi sizler de isterseniz kendiniz oluşturup onlarla da çalışabilirsiniz. Tamamen size kalmış bu kısımlar 😊
Eveeeet dostlarım bu yazımda sizlere elimden geldiğince dilim döndüğünce Vue.js Class 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