VueJS-ディレクティブ

ディレクティブは、VueJSが特定の方法で物事を行うための指示です。v-if、v-show、v-else、v-for、v-bind、v-model、v-onなどのディレクティブはすでに見ました。

この章では、カスタムディレクティブについて説明します。コンポーネントに対して行ったのと同様のグローバルディレクティブを作成します。

構文

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

Vue.directiveを使用してディレクティブを作成する必要があります。上記のようにディレクティブの名前を取ります。ディレクティブの動作の詳細を示す例を考えてみましょう。

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

この例では、カスタムディレクティブを作成しました changestyle 次のコードに示すように。

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

次の変更スタイルをdivに割り当てています。

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

ブラウザに表示される場合、テキストVueJsディレクティブが赤色で表示され、フォントサイズが30pxに拡大されます。

出力

ディレクティブの一部であるbindメソッドを使用しました。3つの引数が必要ですe1、カスタムディレクティブを適用する必要がある要素。バインディングは、カスタムディレクティブに渡される引数に似ています。たとえば、v-changestyle =” {color: 'green'}”です。ここで、緑色はバインディング引数で読み取られ、vnodeは要素(ノード名)です。

次の例では、すべての引数を慰め、それぞれがどのような詳細を提供するかを示しています。

以下は、カスタムディレクティブに値が渡される例です。

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

出力

テキストの色が緑に変わります。値は、次のコードを使用して渡されます。

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

フィルター

VueJSは、テキストの書式設定に役立つフィルターをサポートしています。これは、v-bindおよび補間({{}})とともに使用されます。フィルタのJavaScript式の最後にパイプシンボルが必要です。

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

上記の例では、単純なフィルターカウントレターを作成しました。Countlettersフィルターは、テキストボックスに入力された文字数をカウントします。フィルタを使用するには、次のコードでfilterプロパティを使用し、使用するフィルタを定義する必要があります。

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

メソッドを定義しています countletters 入力した文字列の長さを返します。

ディスプレイでフィルターを使用するために、パイプ演算子とフィルターの名前を使用しました。 countletters

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

以下はブラウザでの表示です。

次のコードを使用して、フィルターに引数を渡すこともできます。

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

さて、 countletters 3つのパラメータがあります。 message, a1, and a2

次のコードを使用して、複数のフィルターを補間に渡すこともできます。

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

フィルタプロパティで countlettersA そして countlettersB 2つの方法と countlettersA 詳細をに渡します countlettersB