Web/21-Vue基础/02-过滤器.md
2018-04-05 21:05:09 +08:00

4.5 KiB
Raw Blame History

Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能这些过滤器称之为系统过滤器Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑Vue称之为自定义过滤器。

系统过滤器

系统过滤器的使用,可以参考参考文档:http://v1-cn.vuejs.org/api/#过滤器

注意系统过滤器是Vue1.0中存在的在Vue2.0中已经删除了。

自定义过滤器

文档地址:http://v1-cn.vuejs.org/guide/custom-filter.html

自定义私有过滤器

私有过滤器:在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。

举例:日期格式化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        {{ time }}
        <br />
        {{ time | datefmt }}
    </div>

</body>
<script>

    new Vue({
        el: '#app',
        data: {
            time: new Date()
        },
        //在某一个vue对象内部定义的过滤器称之为私有过滤器
        //这种过滤器只有在当前vue对象el指定的监管的区域有用
        filters: {
            // input是自定义过滤器的默认参数input的值永远都是取自于 | 左边的内容
            datefmt: function (input) {
                // 定义过滤器的内容将input的值格式化成 yyyy-MM-dd 字符串输出
                var res = '';
                var year = input.getFullYear();
                var month = input.getMonth() + 1;
                var day = input.getDate();

                res = year + '-' + month + '-' + day;

                return res;
            }
        }
    });
</script>

</html>

上面的代码中我们在vue实例中通过filters关键字,在里面定义了一个局部过滤器datefmt

运行结果:

20180405_2038.png

第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date说明过滤器还是起到了作用的。

自定义全局过滤器

可以用全局方法Vue.filter()自定义一个全局过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值。

这样的话每一个Vue的对象实例都可以拿到这个过滤器。

举例:(还是拿上面的代码进行举例)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        {{ time }}
        <br /> {{ time | datefmt }}
    </div>

    <div id="app1">
        {{ time | datefmt }}
    </div>
</body>
<script>

    // 定义一个名称为 datafmt的全局过滤器
    Vue.filter('datefmt', function (input) {
        // 过滤器的逻辑将input的值格式化成 yyyy-MM-dd 字符串输出
        var res = '';
        var year = input.getFullYear();
        var month = input.getMonth() + 1;
        var day = input.getDate();

        res = year + '-' + month + '-' + day;

        return res;
    });

    new Vue({
        el: '#app1',
        data: {
            time: new Date()
        }
    })

    new Vue({
        el: '#app',
        data: {
            time: new Date()
        }
    });
</script>

</html>

v-on的按键修饰符

默认按键修饰符

通俗一点讲指的是监听键盘输入的事件。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

    .enter
    .tab
    .delete (捕获 “删除” 和 “退格” 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    1.0.8+版本:支持单字母的按键别名。

###1.2 可以自定义按键别名

    在Vue2.0 中默认的按键修饰符是存储在 Vue.config.keyCodes中
    // 例如在Vue2.0版本中扩展一个f1的按键修饰符写法
    Vue.config.keyCodes.f1 = 112


    在1.0.17+ 中默认的按键修饰符是存储在Vue.directive('on').keyCodes中

    // 例如在Vue1.0中扩展一个f1的按键修饰符写法
    Vue.directive('on').keyCodes.f1 = 112

1.3 利用v-on的.enter按键修饰符实现品牌管理的新增按钮功能

  • 效果图

    d2-1.png

  • 实现代码

    d2-2.png d2-3.png

axios

axios是在Vue中专门用来发送ajax请求的。

但是axios并不依赖于Vue.js库而是基于promise的。