VueJS - Yönergeler

Yönergeler, VueJS'ye işleri belirli bir şekilde yapma talimatıdır. V-if, v-show, v-else, v-for, v-bind, v-model, v-on, vb. Gibi yönergeleri daha önce görmüştük.

Bu bölümde özel direktiflere bir göz atacağız. Bileşenler için yaptığımıza benzer küresel direktifler oluşturacağız.

Sözdizimi

Vue.directive('nameofthedirective', {
   bind(e1, binding, vnode) {
   }
})

Vue.directive kullanarak bir yönerge oluşturmamız gerekiyor. Direktifin adını yukarıda gösterildiği gibi alır. Direktiflerin işleyişinin ayrıntılarını göstermek 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">
         <div v-changestyle>VueJS Directive</div>
      </div>
      <script type = "text/javascript">
         Vue.directive("changestyle",{
            bind(e1,binding, vnode) {
               console.log(e1);
               e1.style.color = "red";
               e1.style.fontSize = "30px";
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
      </script>
   </body>
</html>

Bu örnekte, özel bir yönerge oluşturduk changestyle aşağıdaki kod parçasında gösterildiği gibi.

Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      e1.style.color = "red";
      e1.style.fontSize = "30px";
   }
});

Aşağıdaki değişim stilini bir div'e atıyoruz.

<div v-changestyle>VueJS Directive</div>

Tarayıcıda görürsek, VueJs Direktifi metnini kırmızı renkte gösterecek ve yazı tipi boyutu 30px'e yükseltilecektir.

Çıktı

Direktifin bir parçası olan bind yöntemini kullandık. Üç argüman alıre1, özel direktifin uygulanması gereken öğe. Bağlama, özel yönergeye aktarılan argümanlara benzer, örneğin v-changestyle = ”{color: 'green'}”, burada yeşil bağlama argümanında okunacak ve vnode öğedir, yani düğüm adı.

Bir sonraki örnekte, tüm argümanları teselli ettik ve her birinin hangi ayrıntıları verdiğini gösteriyor.

Aşağıda, özel yönergeye iletilen bir değere sahip bir örnek yer almaktadır.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-changestyle = "{color:'green'}">VueJS Directive</div>
      </div>
      <script type = "text/javascript">
         Vue.directive("changestyle",{
            bind(e1,binding, vnode) {
               console.log(e1);
               console.log(binding.value.color);
               console.log(vnode);
               e1.style.color=binding.value.color;
               e1.style.fontSize = "30px";
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
      </script>
   </body>
</html>

Çıktı

Metnin rengi yeşile değiştirilir. Değer, aşağıdaki kod parçası kullanılarak iletilir.

<div v-changestyle = "{color:'green'}">VueJS Directive</div>
And it is accessed using the following piece of code.
Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      console.log(binding.value.color);
      console.log(vnode);
      e1.style.color=binding.value.color;
      e1.style.fontSize = "30px";
   }
});

Filtreler

VueJS, metin biçimlendirmeye yardımcı olan filtreleri destekler. V-bind ve enterpolasyonlarla ({{}}) birlikte kullanılır. Filtreler için JavaScript ifadesinin sonunda bir boru sembolüne ihtiyacımız var.

Misal

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input  v-model = "name" placeholder = "Enter Name" /><br/>
         <span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name : ""
            },
            filters : {
               countletters : function(value) {
                  return value.length;
               }
            }
         });
      </script>
   </body>
</html>

Yukarıdaki örnekte, basit bir filtre sayaçları oluşturduk. Sayaç filtresi, metin kutusuna girilen karakterlerin sayısını sayar. Filtrelerden yararlanmak için aşağıdaki kod parçasıyla filter özelliğini kullanmamız ve kullanılan filtreyi tanımlamamız gerekir.

filters : {
   countletters : function(value) {
      return value.length;
   }
}

Yöntemi tanımlıyoruz countletters ve girilen dizenin uzunluğunu döndürmek.

Ekranda filtreyi kullanmak için boru operatörünü ve filtrenin adını kullandık, yani countletters.

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>

Tarayıcıdaki görüntü aşağıdadır.

Aşağıdaki kod parçasını kullanarak filtreye argümanlar da iletebiliriz.

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters('a1', 'a2')}}</b></span>

Şimdi countletters üç parametresi olacak, yani message, a1, and a2.

Aşağıdaki kod parçasını kullanarak enterpolasyona birden çok filtre de iletebiliriz.

<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>

Filtre özelliğinde countlettersA ve countlettersB iki yöntem olacak ve countlettersA ayrıntıları aktaracak countlettersB.