Vue课程学习笔记-day05

复习
    1、过滤器
        1. 定义
            data(){},
            methods:{},
            // 局部过滤器
            filters:{
                dateFormat(time){
                    return xxx;
                }
            }
            // 全局过滤器
            Vue.filter('dateFormat',function(time){
                return xxx;
            })
            需要在vue实例创建之前
        
        2. 使用
            {{date | dateFormat}}
            v-bind:id='item.id | idFormat'
        
        3. 就近原则
    
    2、监听器
        1. 定义
            watch:{
                msg:function(now,old){
                   this.findAll();
                }
            }

            watch:{
                form:{
                    handler:function(){
                        this.findAll();
                    },
                    deep:true
                }
            }

        2. 分页、搜索

学习
    1、组件
        需求
            article:[{},{},{},{}]
            category:[{},{},{},{}]
            -->
            使用表格
            -->
            多个页面渲染数据时，会代码冗余
            -->
            模板给我们做操作
            -->
            组件

        1) 组件的注册
            1. 全局注册
                Vue.component('xpf-div',{
                    template:`
                       <div>hello vue</div> 
                    `
                })
            
            2. 局部注册
                data(){},
                components:{
                'xpf-button':{
                    template:`
                        <button>按钮</button>
                    `,
                }

        2) 组件的使用
            <xpf-alert></xpf-alert>
            <xpf-alert></xpf-alert>
            <xpf-button></xpf-button>
               
        3) 注意：
            1. 组件可以重复调用
            2. 组件的名称无法省略，字母全小写且必须包含一个连字符
            3. 使用Vue.component()注册出来的组件为全局组件，但是必须要在vue实例对象创建之前
            4. 组件的本质是可以复用的vue实例，所以data、methods...等参数，组件都可以使用
                组件中没有el参数(只能出现在根组件中)
            5. 组件中data，必须为函数
                new Vue({
                    el:'',
                    data(){
                        return {}
                    }
                })
                可以确保每个组件都拥有自己独立的data
            6. 全局注册于局部注册的区别
                全局注册出来的组件，所有的vue实例都可以调用
                局部注册出来的组件，只有当前vue实例可以调用
                参考：3-component.html
        
        4) 组件的传值(props)
            1. props用法类似于data，可以直接使用{{}}
            2. 组件接受的参数数量是任意的
            3. props的取值有要求，如下格式都是错误的
                xpf-msg、xpfMsg

    2、项目
        1. 框架
            vue         核心框架
            element-ui  组件库
            jQuery      数据交互
        2. 需求