Vue学习笔记之二Vue-Devtools及过滤器-工具盒子

Vue在chrome浏览器的调试工具Vue-Devtools {#2-vue在chrome浏览器的调试工具vue-devtools}

作用

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。

安装地址：

https://github.com/vuejs/vue-devtools

或者

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

2.1 vue过滤器 {#21-vue过滤器}

2.1.1 系统过滤器 {#211-系统过滤器}

关于系统过滤器的使用请参考文档：https://v1.vuejs.org/api/#Filters
注意：系统过滤器是Vue1.0中存在的，在vue2.0中已经删除了

2.1.2 自定义过滤器 {#212-自定义过滤器}

2.1.2.1 私有过滤器 {#2121-私有过滤器}

table {
    border-collapse: collapse;
    color: black;
}
th{
    color: white;
    background-color: #42B983;
}
table,
tr,
td,
th {
    border: 1px solid #FF0000;
}

<div id="app">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>username</th>
                <th>password</th>
                <th>date</th>
            </tr>
        </thead>
        <tr v-for="user in list">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
            <td>{{ user.date | dateFormate}}</td>
        </tr>
    </table>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        list: [{
            id: 1,
            username: 'guqing',
            password: '12345',
            date: new Date()
        }]
    },
    //在某一个vue对象内部定义的过滤器称为私有过滤器
    //这种过滤器旨在当前vue对象el指定的监管的区域内游泳
    filters: {
        //input是自定义过滤器的默认参数,input的值永远都是取决于 | 左边的内容
        dateFormate: function(input) {
            console.log(input)
            //过滤器的逻辑,将input的值格式化成yyyy-MM-dd字符输出
            var year = input.getFullYear();
            var month = input.getMonth() + 1;
            var day = input.getDay();
            input = year + '-' + month + '-' + day
            return input;
        }
    }
})

以上为创建一个私有日期格式化过滤器，使用方式与系统过滤器一样

2.1.2.2 全局过滤器 {#2122-全局过滤器}

html代码同私有过滤器

js如下：

//定义一个名称为dateFormate的全局过滤器,两个参数,一个参数为过滤器名称,第二个参数为逻辑代码
Vue.filter('dateFormate',function(input) {
    //将input的值格式化成yyyy-MM-dd字符输出
    var year = input.getFullYear();
    var month = input.getMonth() + 1;
    var day = input.getDay();
    input = year + '-' + month + '-' + day
    return input;
})
var vm = new Vue({
el: '#app',
data: {
list: [{
id: 1,
username: 'guqing',
password: '12345',
date: new Date()
}]
}
})

全局过滤器在全局共有，在不能的Vue对象中都可以使用