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ディレクティブが赤色で表示され、フォントサイズが30ピクセルに増加します。

出力

FontSize

ディレクティブの一部である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フィルタは、テキストボックスに入力された文字の数をカウントします。フィルターを使用するには、次のコードによって、フィルタープロパティを使用し、使用するフィルターを定義する必要があります。

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

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

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

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

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

CountLetter

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

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

これで、 countletters には3つのパラメーターがあります。 *メッセージ、a1、およびa2 *。

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

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

フィルタープロパティでは、 countlettersA および countlettersB が2つのメソッドになり、 countlettersA は詳細を countlettersB に渡します。

Vuejs-directives

VueJS-ディレクティブ

構文

例

出力

出力

フィルター

例

目次