vue.js - 指令（directive）、过滤器（filte

2017-07-24 本文已影响273人 ebfc7d0362e4

一、简介
通常，我们会将部分功能较为完整代码封装整合到一起，它们一般一整块地执行，可以接受适当的参数，并可以有一定的返回值，它就是函数。
vue 中，很多地方都涉及了函数，包括钩子函数（created/mounted/updated...）、指令（directive）、过滤器（filter）、方法（method），甚至框架暴露出来的 Vue 对象本身，也是一个函数。本文重点关注指令、过滤器和方法，这三者，因为相对来说，有些情况下，它们功能相近，有的时候可以完成彼此所需要完成的功能，以至于在开发的时候到底选用哪一个，可能会让人觉得无所适从。

二、基本用法
（一）filter
这几个中，可能 filter 的内容最少，也最容易使用。在使用之前，我们先进行相应的注册：

Vue.filter('dollar', function (val) {
    return '$' + val;
});

Vue.filter 接收两个参数，第一个作为起名字兼 id，第二个则基于函数作为其处理程序。然后是在模板中使用它：

<div id="app">
    <div>{{23 | dollar}}</div> 
</div>

只需要在需要使用它的地方加一个 “|” ，后面在跟上这个 filter 的名字即可，调用的时候， “|” 前面的值将自动作为参数传入到这个 filter 的处理函数中，而函数的返回值将替换掉原来的值，渲染在模板中。如果需要更多的参数，模板中的处理函数也可以写成完整的函数执行的形式，并将参数传入其中，“|” 前面的值最终将作为第一个参数，传入的其它参数将在后面依次排列。

<div id="app">
    <div class="fruit">{{'apple' | join('watermelon', 'orange', 'cherry')}}</div> 
</div>
...
var vm = new Vue({
    el: '#app',
    filters: {
        join: function () {
            return Array.prototype.join.call(arguments, ', ');
        }
    }
});

渲染结果：

<div id="app">
    <div class="fruit">apple, watermelon, orange, cherry</div>
</div>

（二）method
vue 实例会自动代理 data/computed/methods 等属性下的内容，其中 data/computed 一般用于存放应用相关的数据，而 methods 则用于存放应用处理某些逻辑相关的代码，本身就体现出一种程序和数据分离的思路。最常见的情况下，我们会将 methods 用于响应浏览器的事件，如下：

<div id="app">
    <button v-on:click="say">alert</button>
</div>
...
var vm = new Vue({
    el: '#app',
    methods: {
        say: function () {
            alert('hello world');
        }
    }
});

当点击了页面上的 button 的时候，会弹出提示“hello world”，这里是最常见的用法。
但是事实上，我们可以在任何需要的地方使用它：

<div id="app">
    <div class="fruit">{{join('apple', 'watermelon', 'orange', 'cherry')}}</div> 
</div>
...
var vm = new Vue({
    el: '#app',
    methods: {
        join: function () {
            return Array.prototype.join.call(arguments, ', ');
        }
    }
});

（三）指令
指令，相对于前两者来说复杂得多，像前面绑定事件的 v-on 实际上就是指令中的一种应用。vue 本身提供了如 v-bind 、 v-on 、v-cloak 等一系列指令，在此基础上，也向开发者提供了自定义指令的开发接口。一条完整的指令如下所示：

v-name:arg.modifiers="value"

其中：

name：指令名，不包含前面的 v- 部分内容；
arg：指令传递的参数，如 v-on:click 中的 click，用于绑定事件类型；
modifiers：修饰符，如 v-on:click.prevent 中的 prevent，用于阻止默认事件；
value：指令的绑定值。
除此之外，自定义指令还有自己的生命周期，拥有：bind、inserted 等一系列钩子函数。
相对于前两者，指令显然复杂得多，但相应的功能也强大得多，因为其涉及的内容比较多，具体请参考官网文档。

三、对比

（一）入参

filter：“|” 前面的部分以及作为函数调用的时候传入的实参；
method：传入的实参，当作为时间处理函数时，会被传入 event 对象；
directive：可接受指令名、指令名后面的参数、指令修饰符、指令绑定值等多种“参数”，同时在钩子函数中也能获取到绑定该指令的 DOM 节点等信息。
从这一点上来看，除了 method 会被传入特殊的 event 对象，其它的内容，这三者其实是可以相互模拟的。

（二）出参

filter：用于替换掉“|”前面的内容；
method：作为返回值，填充在它被执行的地方；
directive：不要求。

（三）实际作用

结合出参、入参，我们分析一下它们的作用：

filter：内容格式化，将输入的数据，按照某种规则进行输出，从这一层讲，感觉叫 formatter 可能更合适；
method：数据、交互等的逻辑处理，相对 formatter 的功能更纯粹，一般结合“数据驱动”的理念，尽量不直接操作 DOM；
directive：DOM 处理中心，拥有相对完整的生命周期，用于控制数据的流转，一般的 DOM 处理等内容都集中到此处。

但实际上，很多内容都是相互交叉的，比如用于处理用户交互的 method 需要通过 v-on 指令来绑定，它本身就是基于 directive 实现的，所以这里它们的作用都只是相对。

vue.js - 指令（directive）、过滤器（filte

三、对比

（一）入参

（二）出参

（三）实际作用

猜你喜欢

热点阅读