属性验证 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:指令绑定之前节点的信息