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

我們將以下 changestyle 分配給一個 div。

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

如果我們在瀏覽器中檢視，它將顯示紅色文字“VueJs 指令”，並且字型大小增加到 30px。

輸出

我們使用了 bind 方法，它是指令的一部分。它接受三個引數：el，需要應用自定義指令的元素；binding，類似於傳遞給自定義指令的引數，例如 v-changestyle = "{color:'green'}", 其中 green 將在 binding 引數中讀取；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。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 將具有三個引數，即message、a1 和 a2。

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

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

在 filter 屬性中，countlettersA 和 countlettersB 將是兩種方法，並且countlettersA 將把詳細資訊傳遞給countlettersB。

列印頁面