vue笔记第三天

1.动画

基础使用：

给哪个元素添加动画，只需要给元素用<transition>标签包裹起来就可以
<transition>
    <div class="box" v-show='isShow'></div>
</transition>
之后去样式中设置6个类名即可
 .v-enter {
            opacity: 0;
        }
​
        .v-enter-to {
            opacity: 1;
        }
​
        .v-enter-active {
            transition: all 2s;
        }
​
        .v-leave {
            opacity: 1;
        }
​
        .v-leave-to {
            opacity: 0;
        }
​
        .v-leave-active {
            transition: all 2s;
        }
​

如果页面中有多个元素需要添加不同的动画，那么只需要给<transition>增加name属性，同时把6个样式中的v-替换为name的值
 <transition name='aa'>
    <div class="box" v-show='isShow'></div>
 </transition>
 样式中:
  .aa-enter {
  opacity: 0;
  }
​
.aa-enter-to {
opacity: 1;
}
​
.aa-enter-active {
transition: all 5s;
}
​
.aa-leave {
opacity: 1;
}
​
.aa-leave-to {
opacity: 0;
}
​
.aa-leave-active {
transition: all 5s;
}

2.动画库

官网:https://animate.style/

使用:引入css，给需要添加动画的元素用<transition>包裹起来，然后添加属性 enter-active-class leave-active-class
 <!-- enter-active-class   leave-active-class 使用：引入第三库 必须添加基类+效果类名 -->
     <transition 
     enter-active-class='animate__animated animate__bounce'
     leave-active-class = 'animate__animated animate__backOutUp'
     >
 <div class="box" v-show='isShow'></div>
 </transition>

3.监听

• 浅监听

主要监听基本数据类型
监听的是在data中声明的变量，而且监听的名字不能更改
 // 浅监听 :只能监听基础数据类型
 name(newVal, oldVal) {
 console.log(newVal, oldVal)
 },

• 深监听

//    监听引用数据类型用深监听 只能获取最新的数据 handler名称不能换  弊端；使用深监听会引起页面的卡顿
 // 非必要情况不要使用，一旦要使用，需要把深监听转换为浅监听
 obj: {
     handler(a) {
     console.log(a)
     },
 deep: true
 },

 

• 百度搜索案例:

百度：http://suggestion.baidu.com/su?cb=callback&wd=123

 

4.过滤器 filter

• 全局过滤器 vue实例的外部定义 Vue.filter(过滤器名称，回调函数)
• 局部过滤器 vue实例中增加配置项filters 过滤器名称:function(){过滤操作}

过滤手机号码
<div id="app">
        <!-- | 叫做管道符  管道符前面是需要过来的属性，过滤器后面是过滤器名称-->
      {{tel | filterTel}}
      <!-- 下面的是错误的，因为是局部定义的过滤器 -->
      {{tel | filTel}} 
    </div>
    <script>
    // 全局过滤器  Vue.filter(过滤器名称,回调函数)
Vue.filter('filterTel',(tel)=>{
    return tel.slice(0,3)+'****'+tel.slice(7)
})

    let vm = new Vue({
        el: '#app',
        data: {
          tel:'15858589958'
        },
        methods: {

        },

        
    })</script>

 

过滤价格
<div id="app">
       价格:{{price | filterPrice}}
    </div>
    <script>

// 全局过滤器  Vue.filter(过滤器名称,回调函数)
Vue.filter('filterPrice',(price)=>{
    return price.toFixed(2)
})
    let vm = new Vue({
        el: '#app',
        data: {
          price:29
        },
        methods: {

        },

        
    })
   
// filter: 全局过滤器  vue实例的外部定义 Vue.filter(过滤器名称，回调函数)
//         局部过滤器  vue实例中增加配置项filters  过滤器名称:function(){过滤操作}
</script>

 

过滤时间
<script>
<div id="app">
      时间:{{time | filterPrice}}
    </div>
// 全局过滤器  Vue.filter(过滤器名称,回调函数)
Vue.filter('filterPrice',(time)=>{
    // 获取当前时间
    let data = new Date(time)
    // 年
    let year = data.getFullYear();
    // 月
    let month= (data.getMonth()+1+'').padStart(2,'0');
    // 日
    let day = (data.getDate()+'').padStart(2,'0')
    // 时
    let hours = data.getHours()
    //分
    let min= data.getMinutes()
    // 秒
    let sec = data.getSeconds() 
    return `${year}-${month}-${day} ${hours}:${min}:${sec}`
})
    let vm = new Vue({
        el: '#app',
        data: {
            // new Date().getTime()  获取当前时间戳
          time:1609917028669
        },
        methods: {

        },

        
    })
   
// filter: 全局过滤器  vue实例的外部定义 Vue.filter(过滤器名称，回调函数)
//         局部过滤器  vue实例中增加配置项filters  过滤器名称:function(){过滤操作}
</script>

 

5.计算属性

通过计算得出来的属性叫做计算属性 配置项(computed)

购物车案例：

 // 计算属性
        computed:{
            avg(){
                var sum = 0;
                this.list.forEach(item=>{
                    sum+=item.score
                })
                return (sum/this.list.length).toFixed(2)
            }
        }