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

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

1.全局组件

<div id="app">
   <!--调用全局组件-->
   <hello></hello>
</div>

<script>
    //全局注册组件
    //组件使用的时候不需要加new,而是通过标签的格式去使用的
    //在使用组件之前，必须要注册后才可以使用。

    //1.创建组件
    const Hello = Vue.extend({
        template:`<h1>hello world</h1>`    //创建组件的内容
    })
    //2.全局注册组件
    Vue.component("hello",Hello)
    new Vue({
        el:"#app"
    })


</script>

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

<div id="app">
        <hello></hello>
    </div>



<script>
    /*
        const Hello = Vue.exptend({template:'<div>hello world</div>'})
        Vue.component("hello",Hello)
    */
                           《VS对比》

    //全局组件注册 （将创建组件与注册组件集成到一起）
    Vue.component("hello",{
        template:'<div>hello world</div>'
    })
    new Vue({
        el:"#app"
    })
</script>

2.局部组件

<div id="app">
    <hello></hello>
</div>

    <!--app2实例中调用局部组件hello报错!-->
<div id="app2">
     <hello></hello>
</div>


<script>
    //局部组件
    //只能在当前的实例中使用局部组件。 components里面进行配置

    //1.创建组件
    const Hello = Vue.extend({
        template:`<h1>hello world</h1>`       //组件内容
    })
    new Vue({
        el:"#app",
        components:{ //2.局部组件的注册
            hello:Hello
        }
    })
    
    new Vue({
        el:"#app2",
    })
</script>

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

//这样创建也可以
<div id="app">
        <hello></hello>
</div>

<script>
    /*
        vue中组件的分类： 全局组件  局部组件
        全局组件注册： Vue.component("组件名",{template:''})
        局部组件注册： components:{组件名：{template:" "}}
    */
    new Vue({
        el:"#app",
        components:{ //在components里面声明局部组件
            hello:{
                template:"<div>hello world</div>"
            }
        }
    })

3.is实现组件的切换功能

<div id="app">
        <button @click="comp=comp==='my-a'?'my-b':'my-a'">切换组件</button>
        <component :is="comp"></component>
 </div>


<script>
    //通过 :is的方式可以实现组件之间的切换功能哦...
    Vue.component("my-a",{
        template:"<div>这是my-a哦...</div>"
    })
    Vue.component("my-b",{
        template:"<div>这是my-b哦...</div>"
    })


    new Vue({
        el:"#app",
        data:{
            comp:"my-a"
        }
    })

</script>

4.组件的认知

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

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

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();
      })

• 例子

<div id="app">
      <p>{{timer | filterTime}}</p>
      <p>{{timer | filterTime("/")}}</p>
    </div>



<script>
 new Vue({
        el:"#app",
        data:{
          timer:Date.now()
        },
        filters:{ //过滤器
          filterTime(val,options='-'){
            let date = new Date(val)
            return date.getFullYear() + options + (date.getMonth()+1) + options + date.getDate()
          }
        }
      })

</script>