Vuejs的属性验证、过滤器以及自定义指令

属性验证 props

在组件通信时，作为接收值得容器（数组，当这个值要进行属性验证时要写成对象形式）
props接收的值可以在该组件中直接使用
props:{ 'money':Number }
问题：不能对数据的取值范围进行判断
解决：

validator

 props:{
 key:{
     validator（value）{
         return value的条件
     }
 }
}

-其他属性
props:{ propA:[], propB:{ type:String, require:true//必填 }, propC:{ default:100//默认值 }， propD:{ default:function(){ return ' } } }

第三方库：vue-validate validate 因为vue未使用typescript验证而产生

过滤器

vue 1.x 提供了10个过滤器，在vue 2.x废弃，由用户自己定义

过滤器：

对数据进行过滤

`html
    {{ time | timeFilter}}
`
`js
filters:{//局部过滤器，
    timeFilter(value){
        const date = new Date();
        return date.getFullYear()
    }
}

Vue.filter('timeFilter',function(value){
       const date = new Date();
        return date.getFullYear()
})
`

自定义指令

-全局自定义指令
`Vue.directive（指令的名称,{ 指令的配置项（钩子函数）}）`
-局部自定义指令

    -指令的钩子函数（5个）
        -bind//只调用一次，指令第一次绑定到元素时调用
        -inserted//被绑定元素插入父节点时调用（在页面显示时）
        -update 指令绑定的元素自身，或是他的内容发生变化时调用
        -componentUpdated 与update相似
        -unbind 解绑时调用（v-if或删除这个元素）

inserted（el,binding,vnode,oldVnode）
el:被绑定的DOM元素
binding:指令的所有信息
vNode：当前指令绑定的虚拟节点的信息
oldVnode:指令绑定之前节点的信息