vue 生命周期与接口请求

什么是生命周期

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

axios的使用

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios.post(`${this.urlList}/weChat/applet/subject/list`, { enable: 1 }).then(res => {

                // console.log(res);

                this.arr1 = res.data.rows

            })

  axios.get(`${this.urlList}/weChat/applet/course/banner/list?number:5`).then(res => {

                // console.log(res);

                this.img1 = res.data.data

            })

 let url = new URLSearchParams()

            url.append('type', 'free')

            url.append('pageNum', '1')

            url.append('pageSize', '10')

            axios.post(`${this.urlList}/weChat/applet/course/list/type`, url).then(res => {

                this.arr2 = res.data.rows

                console.log(res);

            })

导入动画类库：

<link rel="stylesheet" type="text/css" href="./lib/animate.css">

定义三个 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;
      }

}