Vue学习笔记(二) 计算属性、过滤器、过渡动画

最新推荐文章于 2024-09-28 17:32:53 发布

前端弟弟

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量129

点赞数

分类专栏： Vue 文章标签： Vue vue.js

本文链接：https://blog.csdn.net/weixin_44147960/article/details/103472298

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

三、计算属性

当逻辑比较复杂时，就应该使用计算属性。
在vue实例中写上computed的key，定义计算属性时通过函数返回数据，但是在使用计算属性时不能加函数/方法的( )，因为它是一个属性而不是函数
计算属性和函数的区别：函数每调用一次就会执行一次，而计算属性只要返回的结果没有变化，计算属性就只会被执行一次。因为计算属性会将结果缓存起来，如果返回的数据不经常变化，使用计算属性的性能比函数高

<div id="app">
  <p>{{ msg.split('').reverse().join('') }}</p>
    <p>使用函数的：{{ msg3() }}</p>
    <p>{{ msg3() }}</p>
    <p>{{ msg3() }}</p>
    <p>使用计算属性的：{{ msg2 }}</p>
    <p>{{ msg2 }}</p>
    <p>{{ msg2 }}</p>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            msg: 'abcdefg'
        },
        methods:{
          msg3(){
              console.log('函数被执行了');
              return this.msg.split('').reverse().join("")
          }
        },
        computed:{
            msg2(){
                console.log('计算属性被执行了');
                return  this.msg.split('').reverse().join("")
            }
        }
    });
</script>

在这里插入图片描述

四、自定义过滤器

4.1 全局过滤器
通过 Vue.filter( ’ 自定义过滤器的名称 ’ , 处理数据的函数fn ) 来自定义全局过滤器，fn接收一个参数value，就是要处理的数据
4.2 如何使用全局过滤器？
过滤器可以连续使用
在插值语法 {{ msg | 过滤器名称1 | 过滤器名称2 }}
或者v-bind中使用 v-bind:value=“msg | 过滤器名称”

<div id="app">
    <p>{{ name }}</p>
    <p>{{ name | format1 }}</p>
    <p>{{ name | format1 | format2 }}</p>
</div>
<script>
    Vue.filter('format1',function (value) {
        return value.replace(/花/g, 'flower')
    });
    Vue.filter('format2',function (value) {
        return value.replace(/flower/g, 'hua')
    });
    let vue = new Vue({
        el: '#app',
        data: {
            name: "桂花，荷花，梅花，玫瑰花"
        },
        filters: {
	   '过滤器名称': function(){
	   	//处理数据的代码
	   }
        }
    });
</script>

4.3 局部过滤器
在Vue实例中增加一个filters的key，对应的value是处理数据的函数。和全部过滤器不同，局部过滤器只能在对应的实例中使用

五、过渡动画

5.1.如何给Vue控制的元素添加过渡动画？
把要执行动画的元素放在transition组件中
当transition组件中的元素显示时会自动去查找类名 .v-enter 进入之前 / .v-enter-active 进入过程中 / .v-enter-to 进入之后
当transition组件中的元素显示时会自动去查找类名 .v-leave 离开之前 / .v-leave-active 离开过程中 / .v-leave-to 离开之后
5.2 transition注意点：
1. transition中只能放一个元素，多个元素无效，
  如果想给多个元素创建动画，那么必须创建多个transition组件
2. 初始动画设置
  默认情况下第一次进入的时候是没有动画的，如果想一进来就有过度动画效果，那么要给transition添加appear属性,告诉Vue第一次进入就需要显示动画
3. 如何给多个不同的元素指定不同的动画
  如果有多个不同的元素需要执行不同的动画，那么需要通过自定义前缀，给transition 指定name的方式来指定进入之前/中/完成，离开之前/中/完成对应的类名，来实现不同元素执行不同的过渡动画
5.3通过钩子函数来执行动画
在组件中绑定钩子函数 v-on:before-enter=“beforeEnter” / v-on:enter=“enter” / v-on:after-enter=“afterEnter”
虽然是通过js钩子函数来实现过渡动画，但是Vue默认还是会去css中查找类名，为了不让Vue去查找类名，可以给transition添加v-bind:css=“false”
5.4 指定过渡动画的方式
默认类名(v-xxx)
自定义类名前缀(yyy-xxx) < transition name=“yyy”>
钩子函数
自定义类名 < transition enter-class=“enter-xh”>

<style>
   .box{
       width: 200px;
       height: 200px;
        background-color: #fbbbdd;
      }
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="toggle">我是按钮</button>
   <transition appear v-bind:css="false"
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter">
      <div class="box" v-show="isShow"></div>
    </transition>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        methods: {
            toggle(){
                this.isShow = !this.isShow;
            },
          beforeEnter: function (el) {
                //进入动画开始之前
                console.log('beforeEnter');
                el.style.opacity = '0';
            },
            // 当与 CSS 结合使用时
            // 回调函数 done 是可选的
            enter: function (el, done) {
                //进入动画过程中
                console.log('enter');
                /*注意点： 如果是通过JS钩子函数来实现过渡动画
                    那么必须在过渡动画执行过程中的回调函数上写上
                    el.offsetWidth / el.offsetHeight */
                el.offsetWidth;
                el.style.transition = 'all 3s';
                /*注意点： 动画执行完毕之后一定要调用done回调函数
                 否则后续的afterEnter钩子函数不会被执行*/
             /*注意点：如果想要一进入就有动画，最好延迟一下再调用done()方法 */
                setTimeout(function () {
                    done();
                },0);
            },
            afterEnter: function (el) {
                //进入动画执行完毕之后
                console.log('afterEnter');
                el.style.marginLeft = "500px";
                el.style.opacity = '1';
            },
         }
    });
</script>