slot 作用域插槽属性验证过滤器过渡效果 && 动画

最新推荐文章于 2023-04-11 17:38:01 发布

boy-sir

最新推荐文章于 2023-04-11 17:38:01 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/weixin_45213851/article/details/93778752

版权

本文介绍了Vue中slot的两种使用方式，包括旧的`slot-scope`和新的`v-slot`，强调了属性验证的重要性并展示了不同验证方式。同时，讨论了过滤器的概念，指出Vue 2.x废弃内置过滤器但支持自定义过滤器。最后，讲解了过渡效果和动画的实现，包括CSS过渡、JavaScript操作DOM以及过渡模式的应用。

摘要由CSDN通过智能技术生成

slot 作用域插槽

旧： slot-scope

使用流程

在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上
在组件使用时，通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据

通过 slotProp.xxx 就可以进行使用了

  			<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <Hello>
        <template slot = "default" slot-scope = "slotProp">
          <p> {{ slotProp.msg }} </p>
        </template>
      </Hello>
    </div>
    <template id="hello">
      <div>
        <slot name = "default" :msg = "msg"></slot>
      </div>
    </template>
  </body>
  <script src="../../lib/vue.js"></script>
  <script>
    Vue.component('Hello',{
      template: '#hello',
      data () {
        return {
          msg: 'hello'
        }
      }
    })
    new Vue({
      el: '#app'
    })
  </script>
  </html>

新： v-slot

  <div id="app">
    <Hello>
      <template v-slot:default = "slotProp">
        {{ slotProp.msg }}
      </template>
    </Hello>
  </div>
  <template id="hello">
    <div>
      <slot name = "default" :msg = "msg"></slot>
    </div>
  </template>
<script>
 new Vue({
    components: {
      'Hello': {
        template: '#hello',
        data () {
          return {
            msg: 'hello'
          }
        }
      }
    }
  }).$mount('#app')
    </script>

属性验证

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

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

过滤器

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

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

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

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

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

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

     var date = new Date ( val )


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

2.局部定义过滤器

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

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

过渡效果 && 动画

使用形式
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css

<div id="app">
    <button @click = "change"> 切换 </button>
    <transition
      enter-active-class = "animated slideInLeft(效果)"
      leave-active-class = "animated slideOutLeft(效果)"
    >
      <p v-show = "flag"> 内容</p>
    </transition>
  </div>
<script>
  /* 
    业务： 点击按钮，然一个p标签显示或隐藏（ 要有透明度的过渡  ）
    引用第三方的 Animate.css文件
  */
  new Vue({
    el: '#app',
    data: {
      flag: false
    },
    methods: {
      change () {
        this.flag = !this.flag
      }
    }
  })
</script>

在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

我们使用Vue提供的 transition 组件时，vue会提供6（4）个类名，8个 钩子函数 给大家使用

 

    钩子函数： 特定的时间（ 满足某一个条件 ） ， 就会自动触发的一个方法

 

    一个过渡或是一个动画我们分为两个大阶段  

        进入

        离开

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

过渡模式 mode

in-out 先进入在离开
out-in 先离开在进入

<transition
      mode = "in-out"
      enter-active-class = "animated slideInLeft(效果)"
      leave-active-class = "animated slideOutLeft(效果)"
    >
      <p v-if = "flag"> 内容</p>
    </transition>
    <transition
      mode = "out-in"
      enter-active-class = "animated slideInLeft(效果)"
      leave-active-class = "animated slideOutLeft(效果)"
    >
      <p v-if = "!flag"> 内容</p>
    </transition>