vue生命周期 和请求以及动画

一.生命周期

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

详解 8个

初始化尚未完成，data数据和methods方法都为挂在vue实例上

beforeCreate（）{}

能操作data数据的生命周期   一般用于接口请求+数据初始化

created（）{}

虚拟元素挂在前，此页面元素尚未更新

beforeMount（）{}

dom元素挂载后，如果需要操作dom，可以在此生命周期执行

mounted（）{}

执行0-到多次

beforUpdate(){}

updated(){}

还未讲

 销毁之前

  beforeDestroy(){},

销毁之后

destroyed(){}

vue请求

 <script src="./lib/vue-resource-1.3.4.js"></script>它的请求方式

url 的组成 地址  协议(http https)+主机(公网IP 域名)+路径+参数

get

  this.$http.get('http://1.117.81.216:8086/weChat/applet/course/banner/list?number=4').then(

                    res => {console.log(res) }）

post

 this.$http.post('http://1.117.81.216:8086/weChat/applet/course/list/type', {   }, { emulateJSON: true }).then(

                    res => {

                        console.log(res)}）

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>的请求

get

    axios.get('http://1.117.81.216:8086/weChat/applet/course/banner/list?number=4').then(

                    res => {

                        // console.log(res)

                  

                    }

                )

post 

 let formurl = new URLSearchParams()

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

                formurl.append('pageSize', 10)

                formurl.append('pageNum', 1)  */

                post请求 

               axios.post('http://1.117.81.216:8086/weChat/applet/course/list/type', formurl).then(

                    res => {

                        console.log(res)

                        this.courseList = res.data.rows

                    }

                )  

动画  六步

  .v-enter{

            transform: translateX(-200px);

        }

        /* 最后 */

        .v-enter-to{

            transform: translateX(0px);

        }

        /* 中间过程 */

        .v-enter-active{

            transition: all 2s;

        }

        /* 离开 */

        .v-leave{

            transform: translateX(0px);

        }

        /* 离开最后 */

        .v-leave-to{

            transform: translateX(200px);

        }

        /* 过程 */

        .v-leave-active{

            transition: all 2s;

        }