VueJS - Bağlama

Bu bölümde, HTML niteliklerinin nasıl değiştirileceğini veya atanacağını, stili değiştirmeyi ve adı verilen bağlama yönergesi yardımıyla sınıfları atamayı öğreneceğiz. v-bind VueJS ile mevcuttur.

Veri bağlama için neden ve ne zaman v-bind direktifini kullanmamız gerektiğini anlamak için bir örnek ele alalım.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         {{title}}<br/>
         <a href = "hreflink" target = "_blank"> Click Me </a> <br/>
         <a href = "{{hreflink}}" target = "_blank">Click Me </a>  <br/>
         <a v-bind:href = "hreflink" target = "_blank">Click Me </a>   <br/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "DATA BINDING",
               hreflink : "http://www.google.com"
            }
         });
      </script>
   </body>
</html>

Yukarıdaki örnekte, bir başlık değişkeni ve üç bağlantı bağlantısı görüntüledik. Veri nesnesinden href'e bir değer de atadık.

Şimdi, tarayıcıdaki çıktıyı kontrol edip incelersek, aşağıdaki ekran görüntüsünde gösterildiği gibi ilk iki bağlantı bağlantısının href'e doğru şekilde sahip olmadığını göreceğiz.

İlk tıklama href'i hreflink olarak gösterir ve ikincisi onu {{hreflink}} içinde gösterirken, sonuncusu istediğimiz gibi doğru url'yi görüntüler.

Bu nedenle, HTML niteliklerine değer atamak için, onu aşağıdaki gibi v-bind yönergesi ile bağlamamız gerekir.

<a v-bind:href = "hreflink" target = "_blank">Click Me </a>

VueJS ayrıca aşağıdaki gibi v-bind için bir kısaltma sağlar.

<a :href = "hreflink" target = "_blank">Click Me </a>

Tarayıcıda inspect öğesini görürsek, bağlantı etiketi v-bind niteliğini göstermez, ancak düz HTML'yi görüntüler. DOM'u incelediğimizde VueJS özelliklerinin hiçbiri görülmez.

HTML Sınıflarını Bağlama

HTML sınıfını bağlamak için kullanmamız gerekiyor v-bind: class. Bir örnek düşünelim ve içindeki sınıfları bağlayalım.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .active {
            background: red;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "CLASS BINDING",
               isactive : true
            }
         });
      </script>
   </body>
</html>

V-bind: class = ”{active: isactive}” ile oluşturulmuş bir div var.

Buraya, isactivedoğru veya yanlışa dayalı bir değişkendir. Etkin sınıfı div'e uygulayacaktır. Veri nesnesinde, isactive değişkenini true olarak atadık. Tarzda tanımlanmış bir sınıf var.active arka plan rengi kırmızıdır.

Değişken etkinse, renk aksi takdirde uygulanmayacaktır. Tarayıcıdaki çıktı aşağıda olacaktır.

Yukarıdaki ekranda arka plan renginin kırmızı olduğunu görebiliriz. Div öğesine sınıf = "aktif" uygulanır.

Şimdi değişkenin değerini false olarak değiştirelim ve çıktıyı görelim. İsactive değişkeni, aşağıdaki kodda gösterildiği gibi false olarak değiştirilir.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .active {
            background: red;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "CLASS BINDING",
               isactive : false
            }
         });
      </script>
   </body>
</html>

Yukarıdaki ekranda, aktif sınıfın div'e uygulanmadığını görebiliriz.

Ayrıca v-bind özelliğini kullanarak HTML etiketlerine birden çok sınıf atayabiliriz.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div class = "info"  v-bind:class = "{ active: isActive, 'displayError': hasError }">
            {{title}}
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               isActive : false,
               hasError : false
            }
         });
      </script>
   </body>
</html>

Yukarıdaki koddaki div için normal bir sınıf uyguladık, örnek class = ”info”. İsActive ve hasError değişkenine bağlı olarak, diğer sınıflar div'e uygulanır.

Çıktı

Bu, uygulanan normal bir sınıftır. Şu anda her iki değişken de yanlış. Hadi yapalımisActive değişkeni true olarak ayarlayın ve çıktıyı görün.

Yukarıdaki ekranda, DOM'da div, info ve active'e atanmış iki sınıfı görebiliriz. HasError değişkenini true ve isActive'ı false yapalım.

Şimdi, yukarıdaki ekranda gördüğümüzde, info ve displayError sınıfı div'e uygulanıyor. Koşullara göre birden çok sınıfı bu şekilde uygulayabiliriz.

Sınıfı bir dizi olarak da geçirebiliriz. Bunu anlamak için bir örnek alalım.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[infoclass, errorclass]">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError'
            }
         });
      </script>
   </body>
</html>

Çıktı

Yukarıda gördüğümüz gibi, her iki sınıf da div'e uygulanır. Bir değişken kullanalım ve değişkenin değerine göre sınıfı atayalım.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : true,
               haserror : false
            }
         });
      </script>
   </body>
</html>

İki değişken kullandık isActive ve haserror ve aynısı, aşağıdaki div etiketinde gösterildiği gibi div while sınıf bağlama için de kullanılır.

<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>

İsActive doğruysa, infoclass ona atanacaktır. Aynı durum haserror için de geçerli, eğer doğruysa, o zaman ona sadece errorClass uygulanacaktır.

Şimdi, haserror değişkenini doğru ve isActive değişkenini yanlış yapalım.

Şimdi bileşenlerdeki sınıflar için v-bind ekleyeceğiz. Aşağıdaki örnekte, bileşen şablonuna ve ayrıca bileşene bir sınıf ekledik.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <new_component class = "active"></new_component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">Class Binding for component</div>'
               }
            }
         });
      </script>
   </body>
</html>

Tarayıcıdaki çıktı aşağıdadır. Her iki sınıfı da final div'e uygular.

<div class = ”info active”></div>

Doğru / yanlışa dayalı olarak görüntülenecek bileşen bölümüne bir değişken ekleyin.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <new_component v-bind:class = "{active:isActive}"></new_component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">Class Binding for component</div>'
               }
            }
         });
      </script>
   </body>
</html>

Değişken yanlış olduğundan, aktif sınıf uygulanmaz ve aşağıdaki ekran görüntüsünde gösterildiği gibi bilgi sınıfı uygulanır.

Satır İçi Stilleri Bağlama

Nesne Sözdizimi

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding",
               activeColor: 'red',
               fontSize :'30'
            }
         });
      </script>
   </body>
</html>

Output

Yukarıdaki örnekte, div için stil uygulanır ve veriler, veri nesnesinden getirilir.

<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
data: {
   title : "Inline style Binding",
   activeColor: 'red',
   fontSize :'30'
}

Tüm değerleri bir değişkene atayarak ve ardından değişkeni div'e atayarak da aynı şeyi yapabiliriz.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "styleobj">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding",
               styleobj : {
                  color: 'red',
                  fontSize :'40px'
               }
            }
         });
      </script>
   </body>
</html>

Color ve fontSize, styleobj adlı nesneye atanır ve aynısı div'e atanır.

<div v-bind:style = "styleobj">{{title}}</div>

Output

Form Giriş Bağlamaları

Şimdiye kadar oluşturduğumuz örnekte, giriş metin öğesini ve atanan bir değişkene bağlı değeri bağlayan v-modelini gördük. Bu bölümde daha fazlasını öğrenelim.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>TEXTBOX</h3>
         <input  v-model = "name" placeholder = "Enter Name" />
         <h3>Name entered is : {{name}}</h3>
         <hr/>
         <h3>Textarea</h3>
         <textarea v-model = "textmessage" placeholder = "Add Details"></textarea>
         <h1><p>{{textmessage}}</p></h1>
         <hr/>
         <h3>Checkbox</h3>
         <input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               textmessage:'',
               checked : false
            }
         });
      </script>
   </body>
</html>

Metin kutusuna ne yazarsak yazalım aşağıda gösterilmektedir. v-modeline değer adı atanır ve ad, metin kutusuna yazılan her şeyi görüntüleyen {{ad}} 'da görüntülenir.

Çıktı

Biraz daha örnek ve nasıl kullanılacağını inceleyelim.

Radyo ve Seç

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>Radio</h3>
         <input type = "radio" id = "black" value = "Black" v-model = "picked">Black
         <input type = "radio" id = "white" value = "White" v-model = "picked">White
         <h3>Radio element clicked : {{picked}} </h3>
         <hr/>
         <h3>Select</h3>
         <select v-model = "languages">
            <option disabled value = "">Please select one</option>
            <option>Java</option>
            <option>Javascript</option>
            <option>Php</option>
            <option>C</option>
            <option>C++</option>
         </select>
         <h3>Languages Selected is : {{ languages }}</h3>
         <hr/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               picked : 'White',
               languages : "Java"
            }
         });
      </script>
   </body>
</html>

Output

Değiştiriciler

Örnekte üç değiştirici kullandık - trim, number ve lazy.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
         <br/>
         <span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
         <h3>Display Message : {{msg}}</h3>
         <br/>
         <span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
         <h3>Display Message : {{message}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               age : 0,
               msg: '',
               message : ''
            }
         });
      </script>
   </body>
</html>

Output

Number modifieryalnızca sayı girilmesine izin verir. Sayılardan başka herhangi bir girdi almayacaktır.

<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">

Lazy modifier tam olarak girildiğinde metin kutusunda bulunan içeriği görüntüler ve kullanıcı metin kutusunu terk eder.

<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">

Trim modifier başında ve sonunda girilen boşlukları kaldırır.

<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved