Vue中的组件创建和过滤器的使用

Vue中的组件创建和过滤器的使用

1.全局组件

1-1.全局组件的简单方法

2.局部组件

2-1.局部组件简单创建

//这样创建也可以

        

4.组件的认知

• 因为组件可以拥有vue的绝大多数配置，所以组件内部还可以继续通过components声明子组件
• 在vue中，项目结构都是这样的：一个根实例，
• 里面有大量的组件，组件都可以形成嵌套关系
• 在vue中，组件嵌套只能形成父子关系,
• 对于全局组件来说，父子关系只是存在于嵌套的时候
• 子组件只能在父组件的模板里面进行调用！！！

 new Vue({
        el:"#app",
        components:{ //定义局部组件
            father:{ //定义了父组件
                template:"
这是father组件哦...
",
                components:{ 
                    son:{ //定义了子组件 （子组件只能在父组件的模板中进行调用！）
                        template:"
这是son组件哦...
"
                    }
                }
            },
            // son:{
            //     template:"
sssssssssssssssssssss
"  
            // }
        }
    })

5.过滤器的使用

• 过滤器： 数据格式化， 比如，后端返回我们的数据格式是一个时间戳，

• 在页面中使用的时候需要变成真正的时间格式 2018-12-26 34.6 78.5

• 分为两种：全局过滤器，局部过滤器

• 过滤器只是在数据要显示的时候，将数据变化成某种格式

• 全局过滤器 内部必须要写return

        Vue.filter("times", function (val) {
        let date = new Date(val);
        return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      })

• 例子

      
{{timer | filterTime}}
      
{{timer | filterTime("/")}}