Vue2.0自定义过滤器

先了解一下什么是vue过滤器
Vue在1.0中有许许多多的各种功能的过滤器↓

先创建一个实例里面写上一些数据稍后使用
var vm=new Vue({
        el:'#app',
        data:{
            order:1,
            name:"zy",
            wd:"hello",
            count:0,
            price:19999.1234,
            list:["1","2","3","4","5","6","7","8"],
            items:["Tom","Jack","jzx","pzx","yl","zmh","tc","csl","zy","ym","zw","zsy","lx"],
            arr:[{a:1,b:"a"},{a:10,b:"b"},{a:3,b:"c"}]
        },
        methods:{
            up(){
                console.log(1)
            }
        }
    })

		DOM 结构中↓
    ----------------------
     几个1.0中自带的过滤器例子
     
    <div id="app" style="font-size: 50px">
    首字母变成大写:{{wd|capitalize}} <br>
    全部转换成大写:{{wd|uppercase}}      <br>
    全部转换成小写:{{'WORD'|lowercase}}      <br>
    货币过滤器:{{price|currency "£" 2}}     <br>
    延迟事件执行的时间
    <input type="text" @keyup="up|debounce 2000"> <br>
    limitBy 循环数组的时候显示几条数据,从那条(索引)开始显示
    <input type="button" @click="count+=2" value="下一页">
    <p v-for="item in list|limitBy 2 count">{{item}}</p>
    filterBy在所有的数据中过滤
    <input type="text" v-model="name">
    <p v-for="item in items | filterBy name">
        {{item}}
    </p>
    orderBy >=0从小到大  <0 从大到小
    <button @click="order*=-1">排序</button>
    <div v-for="item in arr | orderBy 'a' order">{{item.a}},{{item.b}}</div>

OK~通过上面的几个小例子知道可以通过过滤器来过滤并简单的处理数据但是在Vue2.0中把所有的过滤器都去掉了都要自己写没错就是要用原生来自定义自己需要的过滤器了

---

[正题]

自定义过滤器

给vue增加自定义过滤器,[Vue.filter()]这是给Vue这个大类里面增加过滤器所以一定要写在所有Vue实例前面不然不生效
例子中实现一个过滤当前完整时间的过滤器

{{new Date | filterDate}}
{{Date.now()|filterDate}}
-----------------------
 //给Vue上加自定义过滤器
 第一个参数:过滤器名字,第二参数是回调里面传一个参数就是要过滤的内容
    Vue.filter("filterDate",function (value) {
        //value 就是要过滤的内容
        //根据传进来的参数变成真实的时间
        上面我们分别传了一个
        var time=new Date(value);
        //console.log(time);
        //return "2017-6-29 12:42:00"
        return `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`
    });

Vue中不但可以自定义一些自定
    var vm=new Vue({
        a:"a",
        b:"b",
        el:'#app',
        data:{},
    });
    //自定义属性通过$options来获取
    console.log(vm.$options);
    假如单独调用属性a的话就是
    vm.$options.a