属性验证和过滤器

属性验证

1. props: [ ‘msg’ ] 没有进行验证，只是单纯的接收了一个父组件传递来的数据

2. props: { attr: attrType } 进行普通属性验证

3. props: { type: typeType, default: value } 这里的default是为这个属性设置初始值

4. props: { validator ( val ) { return boolean }} 可以进行一个条件的比较

   <div id="app">
       <Father></Father>
   </div>
   
   <template id="father">
       <div>
           <h3> 这里是父组件 </h3>
           <Son :money = "money" :n = "n"></Son>
       </div>
   </template>
   <template id="son">
       <div>
           <h3> 这里是子组件 </h3>
           <p> 父亲给了我  {{ money + 100}}  钱  </p>
           <p> num: {{ num }} </p>
       </div>
   </template>
   

   Vue.component('Father',{
       template: '#father',
       data () {
           return {
               money: 1000,
               n: 400
           }
       }
   })
   
   Vue.component('Son',{
       template: '#son',
       props: {
           // key: value   key就是我们接收的属性    value就是我们想要的这个属性的数据类型
           'money': Number, // String   Boolean       Object...
           'n': {
               validator ( val ) { //属性验证函数，一般常用于条件的比较
                   // val 就是我们得到的数据
                   return  val > 300 //返回值是一个布尔值
               }
           },
           'num': {
               type: Number,
               default:200
           }
       }
   })
   
   new Vue({
       el: '#app'
   })
   

注意：除了以上形式的属性验证以外，还可能遇到的是 第三方封装的类库 vue-validate vee-validate …

过滤器

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

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

1. 什么是过滤器？

   用来格式化数据的一个函数

2. 使用方式

   • 全局定义过滤器：当前项目内所有的组件都可以使用

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

     //Vue.filter( 过滤器的名称， 过滤器的回调函数 )
     
     Vue.filter('timeFilter',function ( val,type ) {
         console.log( val )
         //val 就是我们获得的数据
         // return newVal   return 的结果就是格式化之后的新数据  return的结果就是页面呈现的结果
     
         var date = new Date ( val )
     
         // 2019-6-26   2019/6/26
     
         return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
     })
     
     new Vue({
         el: '#app',
         data: {
             time: Date.now()
         }
     })
     

   • 局部定义过滤器：只能在当前组件内才能使用

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

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

3. 过滤器要想获得我们的数据，要通过一个叫做 ‘管道符 | ’ 来获取数据

4. 过滤器是对已经有的数据进行格式化，也就是必须先有数据，在去格式化