Vue-day03

一、动画

1、动画的基础

  a、使用给哪个元素添加动画，只需要给元素用<transition>标签包裹起来就可以。

<transition>
    <div class="box" v-show='isShow'></div>
</transition>

　　b、之后去样式中设置6个类名即可 分别是：.v-enter .v-enter-to .v-enter-active .v-leaver .v-leaver-to .v-enter-active

.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;}

　　c、如果页面中有多个元素需要添加不同的动画，那么只需要给<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 2s;}
.aa-leave {opacity: 1;}
.aa-leave-to {opacity: 0;}
.aa-leave-active {transition: all 2s;}

2.动画库

　　a、官网: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>

二、监听

1、浅监听

　　主要监听基本数据类型
　　监听的是在data中声明的变量，而且监听的名字不能更改

 // 浅监听 :只能监听基础数据类型
            name(newVal, oldVal) {
                console.log(newVal, oldVal)
            },

2、深监听

 　　监听引用数据类型用深监听 只能获取最新的数据 handler名称不能换 弊端；使用深监听会引起页面的卡顿
　　非必要情况不要使用，一旦要使用，需要把深监听转换为浅监听

 obj: {
     handler(a) {
     console.log(a)
     },
 deep: true
 },

三.过滤器 filter

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

//过滤手机号

//过滤手机号
body>
    <div id="app">
        <!-- | 叫做管道符  管道符前面是需要过来的属性，过滤器后面是过滤器名称-->
      <!-- {{tel | filterTel}} -->
      <!-- 下面的是错误的，因为是局部定义的过滤器 -->
      {{tel | filTel}} 
    </div>
    <div id="box">
        <!-- {{telephone | filTel}} -->
        {{telephone | filterTel}}
    </div>
</body>

<script>


// 全局过滤器  Vue.filter(过滤器名称,回调函数)
Vue.filter('filterTel',(tel)=>{
    return tel.slice(0,3)+'****'+tel.slice(7)
})
    let vm = new Vue({
        el: '#app',
        data: {
          tel:'15858589958'
        },   
    })
 
    let vv = new Vue({
        el:'#box',
        data:{
            telephone:'15758585757'
        },
        filters:{
           filTel:function(telephone){
            return telephone.slice(0,3)+'****'+telephone.slice(7)
           }
        }
    })



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

四.计算属性

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

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

面试题:

1.watch与computed的区别

watch:函数不需要调用

computed:调用的时候不需要添加()

处理场景:

watch:一个数据影响多个数据

computed:一个数据受多个数据影响

watch：属于监听,监听数据的改变

computed：通过计算得到的属性

2.watch 与methods区别？

watch:是观察动作，自定执行

methods:是方法，需要调用