VueJS - Richtlinien

Anweisungen sind Anweisungen für VueJS, Dinge auf eine bestimmte Art und Weise zu tun. Wir haben bereits Anweisungen wie v-if, v-show, v-else, v-for, v-bind, v-model, v-on usw. gesehen.

In diesem Kapitel werden wir uns benutzerdefinierte Anweisungen ansehen. Wir werden globale Richtlinien erstellen, ähnlich wie wir es für Komponenten getan haben.

Syntax

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

Wir müssen eine Direktive mit Vue.directive erstellen. Es nimmt den Namen der Direktive wie oben gezeigt an. Betrachten wir ein Beispiel, um die Einzelheiten der Funktionsweise von Richtlinien zu veranschaulichen.

Beispiel

<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>

In diesem Beispiel haben wir eine benutzerdefinierte Direktive erstellt changestyle wie im folgenden Code gezeigt.

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

Wir weisen einem Div den folgenden Änderungsstil zu.

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

Wenn wir im Browser sehen, wird der Text VueJs Directive in roter Farbe angezeigt und die Schriftgröße wird auf 30px erhöht.

Ausgabe

Wir haben die Bindungsmethode verwendet, die Teil der Direktive ist. Es braucht drei Argumentee1, das Element, auf das die benutzerdefinierte Direktive angewendet werden muss. Die Bindung ist wie Argumente, die an die benutzerdefinierte Direktive übergeben werden, z. B. v-changestyle = ”{color: 'green'}”, wobei grün im Bindungsargument gelesen wird und vnode das Element ist, dh der Knotenname.

Im nächsten Beispiel haben wir alle Argumente getröstet und es zeigt, welche Details jeder von ihnen gibt.

Es folgt ein Beispiel mit einem Wert, der an die benutzerdefinierte Direktive übergeben wird.

<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>

Ausgabe

Die Farbe des Textes wird in Grün geändert. Der Wert wird mit dem folgenden Code übergeben.

<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";
   }
});

Filter

VueJS unterstützt Filter, die bei der Textformatierung helfen. Es wird zusammen mit V-Bind und Interpolationen ({{}}) verwendet. Wir benötigen ein Pipe-Symbol am Ende des JavaScript-Ausdrucks für Filter.

Beispiel

<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>

Im obigen Beispiel haben wir einen einfachen Filterzähler erstellt. Der Countletters-Filter zählt die Anzahl der in das Textfeld eingegebenen Zeichen. Um Filter verwenden zu können, müssen wir die Filtereigenschaft verwenden und den verwendeten Filter anhand des folgenden Codeteils definieren.

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

Wir definieren die Methode countletters und Zurückgeben der Länge der eingegebenen Zeichenfolge.

Um Filter in der Anzeige zu verwenden, haben wir den Pipe-Operator und den Namen des Filters verwendet, d. H. countletters.

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

Es folgt die Anzeige im Browser.

Wir können dem Filter auch Argumente mit dem folgenden Code übergeben.

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

Jetzt die countletters wird drei Parameter haben, dh message, a1, and a2.

Mit dem folgenden Code können wir auch mehrere Filter an die Interpolation übergeben.

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

In der Filtereigenschaft countlettersA und countlettersB werden die beiden Methoden und die sein countlettersA wird die Details an weitergeben countlettersB.