关于Vue中新老版本slot插槽,属性验证validator,过滤器fliter的用法

关于Vue中新老版本slot插槽,属性验证validator,过滤器fliter的用法

1、插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制

1-1、老版本slot插槽:

<body>
    <div id="app">
        <Okay>
            
            
            <template slot="default" slot-scope="slotProp">
                
                <p>{{ slotProp.msg }}p>
            template>
        Okay>
    div>
    
    <template id="okay">
        <div>
            
            
            <slot name="default" :msg="msg">slot>
        div>
    template>
body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
    <script>
        Vue.component('Okay',{//这里是对okay组件进行注册,组件名
            template:'#okay',//这里是组件的配置项
            data(){//这里data用函数的形式是为了产生一个自己的私有作用域,来
            //存储自己的数据
                return {
                    msg:'hello the world'
                }
            }
        })
        new Vue({
            el:'#app'
        })
    script>

1-2、新版slot插槽

<body>
    <div id="app">
        <Hahaha>
            
            <template v-slot:name="slotProp">
                <p>{{ slotProp.msg }}p>
            template>
        Hahaha>
    div>

    <template id="hahaha">
        <div>
            <slot name="name" :msg="msg">slot>
        div>
    template>

body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
<script>
    Vue.component('Hahaha',{
        template:'#hahaha',
        data(){
            return {
                msg:'哈哈哈'
            }
        }
    })

    new Vue({
    }).$mount('#app')
script>

2、属性验证:

  1. props: [ ‘msg’ ] 没有进行验证,只是单纯的接收了一个父组件传递来的数据
  2. props: { attr: attrType } 进行普通属性验证
  3. props: { type: typeType, default: value } 这里的default是为这个属性设置初始值
  4. props: { validator ( val ) { return boolean }} 可以进行一个条件的比较
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>

<body>
    <div id="app">
        <father>father>
    div>

    <template id="father">
        <div>
            <h3>这里是父组件h3>
            <son :aa="money" v-bind:bb="like">son>
            
        div>
    template>
    <template id="son">
        <div>
            <h3>这里是子组件h3>
            
            <p> 老爸给了我{{aa}}块 p>
            <p>我喜欢打 {{ bb }}p>
        div>
    template>
body>
    <script>
        Vue.component('father',{
            template:'#father',
            data(){
                return {
                    money:5000,
                    like:'basketball'
                }
                    
            }
        })

        Vue.component('son',{
            template:'#son',
            // props:['aa','bb']
            props:{//props用来接收父子组件由父组件传来的数据
                'aa':{

                    validator(val){
                        return val>1000
                    }
                },
                'bb':String
            }
        })

        new Vue({
            el:'#app'
        })
    script>

3、过滤器filter

什么是过滤器? 用来格式化数据的一个函数(过滤器是对已经有的数据进行格式化,也就是必须先有数据,再去格式化)

vue 1.x 版本借鉴了 angular , 提供 10 个过滤器, 包括有: 日期 小数点位数保留 货币 大小写 等

Vue 2.x 废弃了这 10个过滤器,但是它提供了自定义过滤器的方式

全局写法:

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>

<body>

    <div id="app">
        
        
        <p>{{ time | timefilter('/') }}p>
    div>

body>
    <script>

        Vue.filter('timefilter', function( val , type ){
            //timefilter是过滤器的名称,function是回调函数,这里面的val指的就是上面p标签里面的time值。
            console.log(val)//1561546971840
            var date=new Date( val )
            return date.getFullYear() + type + (date.getMonth() + 1)+ type +date.getDate()
        })

        new Vue({
            el:'#app',
            data:{
            time: Date.now()//获取当前时间戳
            }
        })
    script>

局部写法:

<body>
  <div id="app">
    <p> {{ time | timeFilter('/')}} p>
  div>
body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
<script>
  new Vue({
    el: '#app',
    data: {
      time: Date.now()
    },
    filters: { //过滤器的配置项
      'timeFilter': function ( val,type ){
        var date = new Date ( val )
        return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
      }
    }
  })
script>

你可能感兴趣的:(Vue小知识点)