属性验证，生命周期，过滤器

属性验证

案例： 价格的增加 ， 拿到的数据必须做验证 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 …

过渡效果 && 动画

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) {
      // ...
    }

2. 过渡模式 mode
   1. in-out 先进入在离开
   2. out-in 先离开在进入

生命周期 （ 王者 ）

1. 什么是生命周期？
   vue中的生命周期指的是 组件 从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能），我们给这些方法起了个名字叫做（ 生命周期钩子函数/ 组件钩子 ）
2. 为什么要学习生命周期？
   因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途
3. 这个生命周期是谁的生命周期？
   组件
4. 项目中生命周期如何书写（ 功能 ）

swiper

自定义指令

过滤器

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

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

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

2. 使用方式
   1. 全局定义过滤器\

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

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

cli