vue_3

1、什么是生命周期

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

2、vue生命周期钩子函数

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

3、vue生命周期

// 一般用于页面重定向 
        beforeCreate() {
          
        },

// 一般用于接口请求 ，数据初始化      
        created() {

        },

// 页面数据未更新，在内存中已经解析好模版，虚拟dom
        beforeMount() {
           
        },

// 页面更新完成，需要依赖dom的操作，在此完成
        mounted() {
           
        },

// 触发0次或多次，数据更新前
        beforeUpdate() {
          
        },

// 数据更新后
        updated() {
          
        },

// 组件销毁前，清除定时器还有页面监听
        beforeDestroy() {
          
        },

 // 组件销毁后
        destroyed() {
           
        },

4. vue-resource的使用

（1） GET请求

created() {
 
            // 接口请求 数据初始化
 
            this.$http.get("http://wkt.myhope365.com/weChat/applet/course/banner/list?number=3").then(res=>{
 
                    console.log(res);
 
                }
 
            )}

（2）POST请求

 this.$http.post("http://wkt.myhope365.com/weChat/applet/course/list/type",{type:'free',pageSize:10,pageNum:1},{ emulateJSON: true }).then((res)=>{
                 console.log(res);
 
            })

5. axios的使用

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

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

（1） GET请求

 axios.get("http://wkt.myhope365.com/weChat/applet/course/banner/list?number=3").then((res) => {
                        console.log(res);
                     
                    })

（2）POST请求

 // 内置对象
                let url = new URLSearchParams()
                    // let url = new FormData()
                    // 参数一 属性名称，参数二 属性值
                url.append('type', 'free')
                url.append('pageSize', 10)
                url.append('pageNum', 1)
                axios.post("http://wkt.myhope365.com/weChat/applet/course/list/type", url).then((res) => {
                 console.log(res);
               
                })

6.Vue中的动画

6.1 使用过渡类名

.v-enter,
.v-leave-to {
    transform: translateX(100px);
}
        
.v-enter-active,
.v-leave-active {
    transition: all 2s;
}
        
.v-enter-to,
.v-leave {
    transform: translateX(0px);
}
 
<button @click="flag=!flag">点击</button>
<transition>
    <div v-if="flag">啦啦啦</div>
</transition>

6.2 使用第三方css动画库

导入动画类库：

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

<transition enter-active-class="animate__backInDown" leave-active-class="animate__backOutRight">
    <div v-if="flag" class="animate__animated">拉拉啊</div>
</transition>

6.3 使用动画钩子函数

<button @click="flag=!flag">切换</button>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div v-if="flag" class="show">哈哈哈</div>
</transition>
 
 methods: {
                beforeEnter(el) { // 动画进入之前的回调
                    console.log(el);
                    el.style.transform = 'translateX(100px)';
                },
                enter(el, done) { // 动画进入完成时候的回调
                    console.log(done);
                    el.offsetWidth;
                    el.style.transform = 'translateX(0px)';
                    done();
                },
                afterEnter(el) { // 动画进入完成之后的回调
                    this.flag = !this.flag;
                }
            }

6.4 v-for的列表过渡

写列表时要写成transition-group  如果有tag 就是在tag里写这个列表   例如：tag=“div”就是在div里写li   不写tag就是默认在span里写

<button @click="flag=!flag"> 更改显示模式 </button>
<input type="text" v-model="text" @keyup.enter="add">
<transition-group name="list">
<li v-for="(item, i) in list" :key="i" v-show="flag">{{item}}</li>
</transition-group>

6.5 列表的排序过渡

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

.v-move{
    transition: all 0.8s ease;
}
.v-leave-active{
    position: absolute;
}