Vue属性验证及过滤器

最新推荐文章于 2023-05-27 19:26:44 发布

小霖子²²²

最新推荐文章于 2023-05-27 19:26:44 发布

阅读量179

点赞数

文章标签： Vue属性验证 Vue过滤器

本文链接：https://blog.csdn.net/kuku30/article/details/93751894

版权

slot 作用域插槽

旧： slot-scope

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

```javascript
     <!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>

  new Vue({
    components: {
      'Hello': {
        template: '#hello',
        data () {
          return {
            msg: 'hello'
          }
        }
      }
    }
  }).$mount('#app')

属性验证

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

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

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

过渡效果 && 动画

使用形式
- 在 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) {
      // ...
    }

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

生命周期

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

过滤器

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

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

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

使用方式

全局定义过滤器

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

局部定义过滤器

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

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

小霖子²²²

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue属性验证及过滤器

slot 作用域插槽旧： slot-scope使用流程在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上在组件使用时，通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据通过 slotProp.xxx 就可以进行使用了```javascript <!DOCTYPE html>...
复制链接

扫一扫