VueJS - Oluşturma

Bu bölümde, koşullu oluşturma ve liste oluşturma hakkında bilgi edineceğiz. Koşullu oluşturmada, if, if-else, if-else-if, show, vb. Kullanımı hakkında tartışacağız. Liste oluşturmada, for döngüsünün nasıl kullanılacağını tartışacağız.

Koşullu Oluşturma

Koşullu işlemenin ayrıntılarını açıklamak için önce bir örnek üzerinde çalışalım. Koşullu işleme ile, yalnızca koşul karşılandığında çıktı almak istiyoruz ve koşullu kontrol if, if-else, if-else-if, show, vb. Yardımıyla yapılır.

v-eğer

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

Output

Yukarıdaki örnekte, mesajla bir düğme ve iki h1 etiketi oluşturduk.

Show adlı bir değişken bildirilir ve bir true değeriyle başlatılır. Düğmenin yakınında görüntülenir. Düğmeye tıklandığında, bir yöntem çağırıyoruzshowdatagöster değişkeninin değerini değiştirir. Bu, düğmeye tıklandığında show değişkeninin değerinin doğrudan yanlışa ve yanlıştan doğruya değişeceği anlamına gelir.

Aşağıdaki kod parçacığında gösterildiği gibi h1 etiketine if atadık.

<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>

Şimdi yapacağı şey, show değişkeninin değerini kontrol edecek ve eğer doğruysa h1 etiketi görüntülenecektir. Show değişkeninin değeri false olarak değiştiğinden, düğmeyi tıklayın ve tarayıcıda görüntüleyin, h1 etiketi tarayıcıda görüntülenmez. Yalnızca show değişkeni true olduğunda görüntülenir.

Tarayıcıdaki ekran aşağıdadır.

Tarayıcıda kontrol edersek, gösteri yanlış olduğunda elde ettiğimiz şey budur.

Show değişkeni false olarak ayarlandığında, h1 etiketi DOM'den kaldırılır.

Değişken doğru olduğunda gördüğümüz şey budur. Show değişkeni true olarak ayarlandığında h1 etiketi DOM'a geri eklenir.

v-başka

Aşağıdaki örnekte, ikinci h1 etiketine v-else ekledik.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

v-else, aşağıdaki kod parçacığı kullanılarak eklenir.

<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>

Şimdi, eğer gösteri doğruysa “This is h1 tag” görüntülenecek ve yanlışsa “This is h2 tag”görüntülenecek. Tarayıcıda alacağımız şey bu.

Yukarıdaki ekran, show değişkeninin doğru olduğu zamandır. V-else eklediğimiz için, ikinci ifade mevcut değil. Şimdi, düğmeye tıkladığımızda show değişkeni yanlış olacak ve ikinci ifade aşağıdaki ekran görüntüsünde gösterildiği gibi görüntülenecektir.

v-şov

v-show, v-if ile aynı şekilde davranır. Ayrıca, kendisine atanan koşula göre öğeleri gösterir ve gizler. V-if ve v-show arasındaki fark, v-if'in koşul yanlışsa HTML öğesini DOM'dan kaldırması ve koşul doğruysa geri eklemesidir. V-show öğesi, display: none ile ilgili koşul yanlışsa öğeyi gizler. Koşul doğruysa, öğeyi geri gösterir. Böylelikle unsur her zaman dom içinde mevcuttur.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
         <div v-show = "show">
            <b>V-Show:</b>
            <img src = "images/img.jpg" width = "100" height = "100" />
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

v-show, aşağıdaki kod parçacığı kullanılarak HTML öğesine atanır.

<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>

Aynı değişken show'u kullandık ve doğru / yanlış olmasına bağlı olarak görüntü tarayıcıda görüntülenir.

Şimdi, show değişkeni doğru olduğundan, görüntü yukarıdaki ekran görüntüsünde gösterildiği gibidir. Düğmeye tıklayıp ekranı görelim.

Show değişkeni yanlıştır, dolayısıyla görüntü gizlidir. Öğeyi inceler ve görürsek, görüntü ile birlikte div, stil özelliği gösterimine sahip DOM'un bir parçasıdır: yukarıdaki ekran görüntüsünde görüldüğü gibi yok.

Liste Oluşturma

v-için

Şimdi liste oluşturmayı v-for yönergesi ile tartışalım.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "a in items">{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

İtems adlı bir değişken, bir dizi olarak bildirilir. Yöntemlerde, adı verilen bir yöntem vardır.showinputvalue, meyvelerin adlarını alan giriş kutusuna atanır. Yöntemde, metin kutusuna girilen meyveler, aşağıdaki kod parçası kullanılarak diziye eklenir.

showinputvalue : function(event) {
   this.items.push(event.target.value);
}

Girilen meyveleri aşağıdaki kod parçasında gösterildiği gibi görüntülemek için v-for kullandık. V-for, dizide bulunan değerlerin yinelenmesine yardımcı olur.

<ul>
   <li v-for = "a in items">{{a}}</li>
</ul>

For döngüsü ile dizi üzerinde yineleme yapmak için, a'nın dizideki değerleri tuttuğu ve tüm öğeler tamamlanana kadar görüntüleneceği v-for = ”a in items” kullanmalıyız.

Output

Tarayıcıdaki çıktı aşağıdadır.

Öğeleri incelerken, tarayıcıda gösterdiği şey budur. DOM'da, li öğesine herhangi bir v-for yönergesi görmüyoruz. DOM'u herhangi bir VueJS yönergesi olmadan görüntüler.

Dizinin indeksini görüntülemek istersek, aşağıdaki kod kullanılarak yapılır.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "(a, index) in items">{{index}}--{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

İndeksi elde etmek için, aşağıdaki kod parçasında gösterildiği gibi parantez içine bir değişken daha ekledik.

<li v-for = "(a, index) in items">{{index}}--{{a}}</li>

(A, dizin) içinde, a değerdir ve indexAnahtar mı. Tarayıcı ekranı şimdi aşağıdaki ekran görüntüsünde gösterildiği gibi olacaktır. Böylece, indeks yardımı ile herhangi bir özel değer görüntülenebilir.