Vue过滤器、属性验证

过滤器

1. 什么是过滤器？ 用来格式化数据的一个函数 $ 10 ‘$’ + price 日期的格式化

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

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

1. 使用方式 [ol] 全局定义过滤器

<p> {{ time | timeFilter('/')}} </p>

Vue.filter('timeFilter',function ( val,type ) {
console.log( val )
//val 就是我们获得的数据
// return newVal   return 的结果就是格式化之后的新数据  return的结果就是页面呈现的结果

var date = new Date ( val )

// 2019-6-26

return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
})

1. 局部定义过滤器

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

1. 过滤器要想获得我们的数据，要通过一个叫做 ‘管道符 | ’ 来获取数据
2. 过滤器是对已经有的数据进行格式化，也就是必须先有数据，在去格式化

属性验证

案例： 价格的增加 ， 拿到的数据必须做验证 309 + 10 319 30910

1. props: [ ‘msg’ ] 没有进行验证，知识单纯的接收了一个父组件传递来的数据
2. props: { attr: attrType } 进行普通属性验证
3. props: { type: typeType, default: value } 这里的default是为这个属性设置初始值
4. props: { validator ( val ) { return boolean }} 可以进行一个条件的比较

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

案例：

<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>

/*
父子组件通信会使用到 props
*/

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

过渡效果与过渡动画

1. 使用形式
   在 CSS 过渡和动画中自动应用 class
   • 可以配合使用第三方 CSS 动画库，如 Animate.css 【 要求 】
   • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
   • 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

beforeEnter: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------

beforeLeave: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}

1. 过渡模式 mode [ol] in-out 先进入再离开
2. out-in 先离开再进入