vue生命周期，axios以及动画

生命周期

• 定义：
  从vue实例创建、运行、销毁期间伴随的各种各样的事件。

• 生命周期钩子函数
  生命周期函数 = 生命周期事件 = 生命周期钩子

• 生命周期图示
  

axios

created() {
        let url = new URLSearchParams()
        url.append('type', 'free')
        url.append('pageSize', 10)
        url.append('pageNum', 1)
        axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', url).then(res => {
          // console.log(res);
          this.imgSrc = res.data.rows[0].bannerFileUrlPc
        })

        axios.get('http://wkt.shangyuninfo.cn/weChat/applet/course/banner/list?number=5').then(res => {
          // console.log(res.data.data);
          this.imgSrc1 = res.data.data[0].imgUrlPc
        })
      }

vue动画

1. 使用过渡类名

.v-enter {
      transform: translateX(500px);
    }

    .v-enter-to {
      transform: translateX(0);
    }

    .v-enter-active {
      transition: all 3s;
    }

    .v-leave {
      transform: translateX(0);
    }

    .v-leave-to {
      transform: translateX(500px);
    }

    .v-leave-active {
      transition: all 3s;
    }

2. 使用第三方css动画库

引入第三方动画库

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

<button @click="show = !show">
    Toggle render
  button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hellop>
  transition>

3. 钩子函数

   定义 transition 组件以及三个钩子函数：

<div id='app'>
    <div id="app">
      <input type="button" value="切换动画" @click="isshow = !isshow">
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <div v-if="isshow" class="show">OKdiv>
      transition>
    div>
  div>

定义三个 methods 钩子方法：

methods: {
        beforeEnter(el) { // 动画进入之前的回调        
          el.style.transform = 'translateX(500px)';
        },
        enter(el, done) { // 动画进入完成时候的回调        
          el.offsetWidth;
          el.style.transform = 'translateX(0px)';
          done();
        },
        afterEnter(el) { // 动画进入完成之后的回调        
          this.isshow = !this.isshow;
        }
      }

定义动画过渡时长和样式：

.show {
      transition: all 0.4s ease;
    }