2、Vue 计算属性、过渡&动画、组件、路由（系列：Vue深入学习）

计算属性

什么是计算属性

在插值表达式中使用表达式是非常便利，但是实际进行开发中我们不可能把插值表达式写的很复杂。如果把表达式写的过于复杂，这就增加了维护的难度。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。
例子：

<div id="app">
    {
  { reverseText }}
</div>
<script>
    let app  = new Vue({
    
        el:'#app',
        data:{
    
            text:'hello vue'
        },
        computed:{
    
            reverseText:function(){
    
                return this.text.split(' ').reverse().join(' ');
            }
        }
    })
</script>

在 Vue 的实例中可以使用 computed 对象，来进表达式的设置,而在每一个表达式中实际上都包含 getter 和 setter 。
例子：

<div id="app">
    姓名：{
  { fullName }}
</div>
<script>
    let app  = new Vue({
    
        el:'#app',
        data:{
    
            firstName: 'Petor',
            lastName: 'Green'
        },
        computed:{
    
            fullName: {
    
                get: function () {
    
                    return this.firstName + " " + this.lastName;
                },
                set: function (name) {
    
                    let names = name.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        }
    })
</script>

如以上例子所示：
当我们访问 fullname 表达式时：

• getter ： 在读取属性时调用函数,当我们调用 app.fullName 触发该函数
• setter ： 在修改属性时调用函数，当我们执行 app.fullName ='John Doe1' 时，触发该函数

过渡 & 动画

vue 中提供了一个 transition 的一个元素，可以给任何元素和组件添加进入/离开过渡，配合：

• 使用 v-if
• 使用 v-show
• 动态组件
• 组件根节点

进行使用

html 代码：

<div id="vue">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition>
    <p v-if="show">hello</p>
  </transition>
  <!-- 将你要过渡的元素或组件包裹在 transition 元素内 -->
</div>

js 代码：

new Vue({
   
  el: '#vue',
  data: {
   
    show: flase
  }
})

css 代码：

.v-enter-active,
.v-leave-active {
   
  transition: all .7s ease;
}
.v-enter,
.v-leave-to {
   
  opacity: 0;
}

过渡类名

在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my">，那么 v-enter 会替换为 my-enter。

v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线。

html 代码：

<div id="vue">
    <input type="button" value="toggle" @click='show=!show'>
    <transition name = 'animate'>
        <p v-show='flag'>这是一个 hello vue</p>
    </transition>
</div>

css 代码：

.animate-enter,
.animate-leave-to {
   
    opacity: 0;
    transform: translateX(100px);
}
.animate-enter-active,
.animate-leave-active {
   
    transition: all 1s ease;
}

js 代码：

let vue = new Vue({
   
    el:'#vue',
    data:{
   
        show:false,
    }
})

借用第三方类实现动画

这里用的第三方的 animate 类

网址：https://daneden.github.io/animate.css/

在官网上你可以看到他的很多类，及其动画效果。

安装

npm install animate

引用

使用CDNJS的CDN托管版本

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

或

<link rel = “ stylesheet ”  href = “ animate.min.css ”>

使用

这里一个 animate 中的 类 为例：

<div id="vue">
    <button @click='flag=!flag'>toggle</button>
    <transition enter-active-class='fadeInUp' leave-active-class='flipOutX' :duration='1000'>
        <p v-show='flag' class="animated">hello vue</p>
    </transition>
</div>

js 代码：

let vue = new Vue({
   
    el:'#vue',
    data:{
   
        flag:false,
    },
    methods:{
   

    }
})

注意：

• 在 transition 元素中加入 enter-active-class 和 leave-active-class 分别表示进场动画、离场动画

• :duration='ms' 表示统一设置进场和离场的动画持续时间（ms 表示 毫秒值，直接填写数值，不要加单位）

• :duratoin='{leave:ms,enter:ms}' 表示分别设置进场和离场的动画持续时间

• 想要动画生效，必须在你想生效的动画元素上加上一个类class="animated"，或者在 transition 元素中的 enter-active-class 和 leave-active-class 分别加上 animated，例如

  • <transition enter-active-class='animated fadeInUp' leave-active-class='animated flipOutX' :duration='1000'>
        <p v-show='flag'>hello vue</p>
    </transition>
    

钩子函数

动画中使用钩子函数需要借用 v-on: 进行事件绑定，例如：

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled">
</transition>

以上代码可以看到一个动画的整个生命周期

• before-enter ：表示元素的动画开始之前的初始化样式（动画没有开始）
• enter ：表示动画开始之后的样式，一般定义动画的结束样式

methods: {
   
  // --------
  // 进入中
  // --------

  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) {
   
    // ...
  }
}

注意：

• 要想有动画有效必须在事件的顶端加上，el.offsetTop 或 el.offsetHeight

  • enter(el){
           
        el.offsetWidth;//el.offsetHeight 也是可以的
    
        el.style.transform = 'translate(150px,450px)';
        el.style.transition = 'all 1s ease';
    }
    

• 在 enter 和 leave 中必须使用 done 进行回调，因此过渡会立即完成；否则，它们将被同步调用，会有 1 到 2 秒的卡顿

  • enter(el,done){
           
        el.offsetWidth;//el.offsetHeight 也是可以的
    
        el.style.transform = 'translate(150px,450px)';
        el.style.transition = 'all 1s ease';
        done();
    }
    

• 构造函数应用场景一般是半场动画

列表

在列表过渡的时候，如果是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要是用 transition-group 进行包裹

html