vue 5 生命周期，axios以及动画.

一， 生命周期

   //data和methods还没有初始化
    //用于页面的重定向
    beforeCreate() {
        console.log(this.msg)
    },
1
2
3
4
5

  //data和methods已经初始化
    //是第一个可以炒作数据和方法的生命周期
    //用于接口和数据的初始化

    created() {
        this.msg='hello'
        console.log(this)
    },
1
2
3
4
5
6
7
8

 //虚拟的dom挂载
    beforeMount() {

    },
1
2
3
4

  //真实的dom挂载
    mounted() {

    },
1
2
3
4

  //可以执行跟多次或0次
    //页面更新前页面是旧的data是新的，数据和页面尚未同步
    beforeUpdate() {
    },
1
2
3
4

  //更新之后 页面和data的数据都是新的
    updated() {
    },
1
2
3

 //页面销毁之前
    beforeDestroy() {
    },
1
2
3

   //页面销毁之后
    destroyed() {

    }
1
2
3
4

//组件激活时调用
activated（）{
}

1
2
3
4

//组件停用时调用。
deactivated(){
}
1
2
3

//当捕获一个来自子孙组件的错误时被调用。
errorCaptured(){
}
1
2
3

二，axios 的使用

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1.安装方法

使用
npm: npm install axios
引入
import axios from “axios”

2.get请求

全局引用

import axios from "axios";
Vue.prototype.$axios=axios
1
2
3

 created() {

        this.$axios.get('http://1.117.81.216:8087/weChat/applet/course/banner/list?number=5').then(res=>{
            console.log(res)
            this.list=res.data.data

            }
            }
1
2
3
4
5
6
7
8

2.post请求

   let url =new URLSearchParams()
        url.append('ContentType','application/json')
            url.append( 'enable',1)


        this.$axios.post('http://1.117.81.216:8087/weChat/applet/subject/list').then(res=>{
            console.log(res)
        })

1
2
3
4
5
6
7
8
9

<template>
    <div>
<div v-for="(item) in list"  :key="item.id ">
<img :src="item.imgUrlPc" alt="">
</div></div>

</template>
1
2
3
4
5
6
7

三，axios封裝

// 对http请求进⾏封装
import axios from 'axios'
// 使⽤⾃定义的配置⽂件发送请求
const instance = axios.create({
 baseURL: '',
 timeout: 5000,
 headers: {
 }
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
 // 在发送请求之前做些什么
 return config;
}, function (error) {
 // 对请求错误做些什么
 return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
 instance// 对响应数据做点什么
 if(response.status === 200){
 return response.data;
 }else{
 console.error("请求错误")
 console.error(response)
 }
 return response;
}, function (error) {
 // 对响应错误做点什么
 return Promise.reject(error);
});
export default instance
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

四，Vue动画

<div id="app">
 <input type="button" value="动起来" @click="myAnimate">
 <!-- 使⽤ transition 将需要过渡的元素包裹起来 -->
 <transition name="fade">
 <div v-show="isshow">动画哦</div>
 </transition>
</div>
1
2
3
4
5
6
7

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
 el: '#app',
 data: {
 isshow: false
 },
 methods: {
 myAnimate() {
 this.isshow = !this.isshow;
 }
 }
});
1
2
3
4
5
6
7
8
9
10
11
12

1.定义两组类样式：

/* 定义进⼊和离开时候的过渡状态 */
.fade-enter-active,
.fade-leave-active {
 transition: all 0.2s ease;
 position: absolute;
}
/* 定义进⼊过渡的开始状态 和 离开过渡的结束状态 */
.fade-enter,
.fade-leave-to {
 opacity: 0;
 transform: translateX(100px);
}
1
2
3
4
5
6
7
8
9
10
11
12

2. 使⽤第三⽅css动画库

npm安装Animate.css

npm install animate.css --save

在main.js中引⼊

import ‘animate.css’;

3.定义 transition 及属性：

<transition
enter-active-class="fadeInRight"
 leave-active-class="fadeOutRight"
 :duration="{ enter: 500, leave: 800 }">
<div class="animated" v-show="isshow">动画哦</div>
</transition>
1
2
3
4
5
6

4.使⽤动画钩⼦函数:

1.定义 transition 组件以及三个钩⼦函数：

<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">OK</div>
 </transition>
</div>
1
2
3
4
5
6
7
8
9

2.定义三个 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;
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

3.定义动画过渡时⻓和样式：

.show{
 transition: all 0.4s ease;
}
1
2
3

五,v-for的列表过渡

1.定义过渡样式：

<style>
 .list-enter,
 .list-leave-to {
 opacity: 0;
 transform: translateY(10px);
 }
 .list-enter-active,
 .list-leave-active {
 transition: all 0.3s ease;
 }
</style>
1
2
3
4
5
6
7
8
9
10
11

2.定义DOM结构，其中，需要使⽤ transition-group 组件把v-for循环的列表包裹起来：

<div id="app">
 <input type="text" v-model="txt" @keyup.enter="add">
 <transition-group tag="ul" name="list">
 <li v-for="(item, i) in list" :key="i">{{item}}</li>
 </transition-group>
</div>
1
2
3
4
5
6

3.定义 VM中的结构：

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
 el: '#app',
 data: {
 txt: '',
 list: [1, 2, 3, 4]
 },
 methods: {
 add() {
 this.list.push(this.txt);
 this.txt = '';
 }
 }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.列表的排序过渡

<transition-group> 组件还有⼀个特殊之处。不仅可以进⼊和离开动画，还可
以改变定位。要使⽤这个新功能只需了解新增的 v-move 特性，它会在元素的改
变定位的过程中应⽤。
1
2
3

5.v-move 和 v-leave-active 结合使⽤，能够让列表的过渡更加平缓柔和：

.v-move{
 transition: all 0.8s ease;
}
.v-leave-active{
 position: absolute;
}
1
2
3
4
5
6