極客書

VueJS 指令

指令是VueJS以某種方式執行任務的指令。我們已經看到了諸如v-if、v-show、v-else、v-for、v-bind、v-model、v-on等指令。

在本章中，我們將了解自定義指令。我們將創建類似於組件的全局指令。

Syntax

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

我們需要使用Vue.directive創建一個指令。它接受如上所示的指令的名稱。讓我們考慮一個例子來展示指令工作的細節。

Example

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

在本例中，我們創建了一個自定義指令，如下面的代碼所示。

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。

Output

FontSize

我們使用了bind方法，它是指令的一部分。它接受三個參數e1，這個元素需要應用自定義指令。綁定類似於傳遞給自定義指令的參數，例如v-changestyle=「{color:'green'}」，其中在綁定參數中將讀取green，而vnode是元素，即nodename。

在下一個例子中，我們已經安慰了所有的論點，它顯示了每一個論點都給出了哪些細節。

下面是傳遞給自定義指令的值的示例。

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

Output

Colour Change

文本的顏色改爲綠色。使用以下代碼傳遞值。

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

Filters

VueJS支持幫助設置文本格式的篩選器。它與v-bind和插值（{{}）一起使用。我們需要一個管道符號在JavaScript表達式的末尾用於過濾器。

Example

<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。Countletters篩選器統計文本框中輸入的字符數。要使用過濾器，我們需要使用filter屬性並通過下面的代碼定義使用的過濾器。

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

我們定義方法countletters並返回輸入字符串的長度。

要在顯示中使用filter，我們使用了pipe運算符和filter的名稱，即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>

現在，倒計時字母將有三個參數，即消息、a1和a2。

我們還可以使用下面的代碼將多個過濾器傳遞給插值。

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

在filter屬性中，countlettersA和countlettersB將是兩種方法，countlettersA將把詳細信息傳遞給countlettersB。