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 },
全局过滤器 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:{ 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区别？
methods:是方法，需要调用
