VueJS自定义指令和过滤器用法详解

在上一节中，我们学习了VueJS过渡和动画（transition & animation）的用法，无论是实现过渡还是动画，在VueJS它们的使用都是类似的，你可以根据标准过渡或动画类自定义然后使用。

指令是指示VueJS以某种方式进行操作，我们之前已经看到了诸如v-if、v-show、v-else、v-for、v-bind、v-model、v-on等指令。在这一节中，我们将学习自定义指令，创建类似于组件的全局指令，同时学习Vue过滤器的创建和使用。

一、VueJS自定义指令和使用指令

自定义指令的语法如下：

Vue.directive("指令的名称", {
    bind(e1, binding, vnode) {
    }
    })

自定义指令使用Vue.directive创建一个指令，它使用如上所示的指令名。下面看一个例子来理解指令的用法和工作原理。

<div id="app">
        <div v-changestyle>VueJS自定义指令</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 app = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
        });
    </script>

在本例中，我们创建了一个自定义指令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自定义指令</div>

我们在浏览器中看到，它将显示红色的文本，并且它字体大小增加到30px，这是因为自定义指令的作用。

代码中使用了bind方法，它是指令的一部分，并且它有三个参数，e1为需要应用自定义指令的HTML元素。Binding为传递给自定义指令的参数，例如v-changestyle = {color: green}，其中green可以在binding参数中读取，而vnode是元素，即节点名。

在下面的一个例子中，输出所有的参数，显示了每个参数的细节。下面是一个将值传递给自定义指令的示例。

<div id="app">
        <div v-changestyle="{color:'green'}">VueJS自定义指令值传递</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 app = new Vue({
            el: "#app",
            data: {
            },
            methods: {
            },
        });
    </script>

二、VueJS过滤器的创建使用

VueJS支持帮助文本格式化的过滤器，它与v-bind和插值表达式{{}}一起使用。我们需要在过滤器的JavaScript表达式末尾添加一个管道符号。

<div id="app">
        <input v-model="name" placeholder="输入内容" /><br />
        <span style="font-size:25px;"><b>字数为 : {{name | countletters}}</b></span>
        <span style = "font-size:25px;"><b>字数为 : {{name | countlettersA, countlettersB}}</b></span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                name: ""
            },
            filters: {
                countletters: function (value) {
                    return value.length;
                }
            }
        });
    </script>

在上面的例子中，我们创建了一个简单的过滤器countletters，这个过滤器用于计算文本框中输入的字符数。要使用过滤器，我们需要使用过滤器属性，并通过以下代码段定义所使用的筛选器。

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

我们定义方法countletters并返回输入字符串的长度，为了得到预期的显示效果，我们使用了管道操作符和过滤器的名称。

<span style="font-size:25px;"><b>字数为 : {{name | countletters}}</b></span>

也可以和上面自定义指令一样，将值或参数传给过滤器，如下代码：

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

现在，过滤器countletters有三个参数，即message、a1和a2。

我们还可以使用下面的代码段将多个过滤器传递给插值表达式。

<span style = "font-size:25px;"><b>字数为 : {{name | countlettersA, countlettersB}}</b></span>

过滤器的两个属性countlettersA和countlettersB是两个方法，countlettersA将细节信息传递给countlettersB。