vue的使用02----vue生命周期，axios以及动画

最新推荐文章于 2024-06-19 11:11:55 发布

A &......

最新推荐文章于 2024-06-19 11:11:55 发布

阅读量193

点赞数

文章标签： vue ajax

本文链接：https://blog.csdn.net/m0_47531829/article/details/118965413

版权

Vue生命周期 axios HTTP请求数据更新动画效果

关键词由CSDN通过智能技术生成

vue的生命周期：
1.1什么是生命周期？从Vue实例创建，运行，到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
1.2vue生命周期钩子函数：每个Vue实例在被创建时都要经过一系列的初始化过程----例如，需要设置数据监听、编译模板、将实例挂载在DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会；
1.3vue的生命周期

vue的生命周期可以分为8个过程，其中记忆的时候可以每两个在一块记忆：
在上图中beforeCreate----created beforeMount----mounted beforeUpdate—updated beforeDestroy—destroyed是主要过程；

beforeCreate和created:beforeCreate表示创建之前，created表示创建后，在beforeCreate的时候data和methods等里面的数据还没初始化；
在created中，data和methods已经开始初始化好了，一般可以用于网页重定向；
beforeMount和mounted：beforeMount执行的时候，模板在内存中已经编译好，但是尚未挂载到页面中去，此时dom是一个虚拟dom，
mounted：vue实例初始化完毕，页面加载dom元素；
beforeUpdata和updated：表示数据的更新，当页面中的数据有更新的时候才会触发这两个函数事件，beforeUpdata表示更新前，此时数据
还是更新前的数据，数据是旧的，updated表示更新后，此时的数据是更新后的新数据；
beforeDestroy和destroyed：表示vue的销毁；beforeDestroy表示销毁前：Vue实例从运行阶段已经开始进入销毁阶段；当执行beforeDestroy
时候，实例上面的所有data和methods,以及过滤器等都处于可用状态，此时还没有真正执行销毁过程；当执行destroyed函数的时候，
上述的所有被完全销毁，不可再用；

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{mes}}
        <input type="text" v-model:value="mes" />
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                mes: "测试生命周期",
            },
            methods: {},
            // 生命周期函数
            // 一般在这做页面重定向
            beforeCreate() {
                console.log("这是第一个生命周期函数：beforeCreate");
                console.log(this.mes); //undefined
            },
            //在这可以拿到data和methods数据， 一般在这请求接口和数据初始化
            created() {
                console.log("这是第二个生命周期函数：created");
                console.log(this.mes); //测试生命周期
            },
            //页面渲染
            beforeMount() {
                console.log("这是第三个生命周期函数：beforeMount");
                debugger;
            },
            //需要操作dom元素，放在这里
            mounted() {
                console.log("这是第四个生命周期函数：mounted");
            },
            //数据更新
            beforeUpdate() {
                console.log("这是第五个生命周期函数：beforeUpdate");
            },
            updated() {
                console.log("这是第六个生命周期函数：updated");
            },
            //实例销毁
            beforeDestroy() {
                console.log("这是第七个生命周期函数：beforeDestroy");
            },
            destroyed() {
                console.log("这是第八个生命周期函数：destroyed");
            },
        });
    </script>
</body>

</html>

axios的使用：vue-resource的使用
首先引入vue-resource地址：

然后在vue的八大生命周期中的created中进行get或者post请求；
在进行get请求的时候，this.￥(英文状态下的美元符号)http.get()参数只有一个url地址,提交的参数同？拼接在url地址后面，多个参数之间用&链接，
在进行post请求的时候，如果向后台提交的参数形式是form表单的形式，this.$http.post()，里面的参数除了url地址，提交的参数以外，还有{emulateJSON: true}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.3/vue-resource.js"></script>
</head>
<style>
    li {
        list-style: none;
    }
</style>

<body>
    <div id="app">
        <ul v-for="(item,index) in imgList">
            <li><img :src="item.imgUrlPc" alt="" /></li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                imgList: [],
            },
            methods: {},

            //在这可以拿到data和methods数据， 一般在这请求接口和数据初始化
            created() {
                // get请求:只需要一个参数
                this.$http
                    .get("http://wkt.myhope365.com/weChat/applet/course/banner/list")
                    .then((res) => {
                        this.imgList = res.body.data;
                    });
                // http://wkt.myhope365.com
                //post请求：一般post请求有两个参数，url地址，和提交的参数，如果是用form表单的形式提交的参数，
                //post请求还要有第三个参数：{emulateJSON: true}
                this.$http
                    .post(
                        "http://wkt.myhope365.com/weChat/applet/course/list/type", {
                            type: "free",
                            pageNum: 1,
                            pageSize: 10,
                        }, {
                            emulateJSON: true
                        }
                    )
                    .then((res) => {
                        console.log(res);
                    });
            },
        });
    </script>
</body>

</html>

axios的使用：axios是一个基于promise的http库，可以用在浏览器和node.js中。并不依赖vue
axios与vue-resource使用方法基本一样，不同的是，当post请求提交的参数形式使form表单的时候，第三个参数不是{emulateJSON: true}了，而是需要自己定义一个提交参数形式let form = new FormData();log一下form会发现里面有一个append属性，把提交的参数方法append属性里面，用键值对的形式；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.3/vue-resource.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<style>
    li {
        list-style: none;
    }
</style>
<body>
    <div id="app">
        <ul v-for="(item,index) in imgList">
            <li><img :src="item.imgUrlPc" alt="" /></li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                imgList: [],
            },
            methods: {},

            //在这可以拿到data和methods数据， 一般在这请求接口和数据初始化
            created() {
                // get请求:只需要一个参数
                axios
                    .get("http://wkt.myhope365.com/weChat/applet/course/banner/list")
                    .then((res) => {
                        this.imgList = res.data.data;
                    });

                // http://wkt.myhope365.com
                //post请求：一般post请求有两个参数，url地址，和提交的参数，如果是用form表单的形式提交的参数，post请求还要有第三个参数：自己创建一个所需要提交参数的实例；
                let form = new FormData();
                form.append("type", "free");
                form.append("pageNum", 2);
                form.append("pageSize", 10);
                axios
                    .post(
                        "http://wkt.myhope365.com/weChat/applet/course/list/type",
                        form
                    )
                    .then((res) => {
                        console.log(res);
                    });
            },
        });
    </script>
</body>
</html>

vue中的动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.3/vue-resource.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<style>
    .v-enter {
        opacity: 0;
        transform: translateX(300px);
    }
    
    .v-enter-active {
        transform: rotate(180deg);
        transition: 2s;
    }
    
    .v-enter-to {
        opacity: 1;
        transform: translateX(0px);
    }
    
    .fade-enter {
        opacity: 0;
        transform: translateX(300px);
    }
    
    .fade-enter-active {
        transition: 2s;
    }
    
    .fade-enter-to {
        opacity: 1;
        transform: translateX(0px);
    }
</style>

<body>
    <div id="app">
        <button @click="isShow=!isShow">按钮</button>
        <transition>
            <div v-if="isShow">动画</div>
        </transition>
        <transition name="fade">
            <div v-if="isShow">动画</div>
        </transition>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                isShow: false,
            },
            methods: {},
        });
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" />
    <script src="./js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style></style>

<body>
    <div id="app">
        <h1 class="animated bounce">An animated element</h1>
        <h1 class="animated bounceInDown">An animated element</h1>
        <h1 class="animated bounceInLeft">An animated element</h1>
        <h1 class="animated bounceInRight">An animated element</h1>
        <h1 class="animated bounceInUp">An animated element</h1>
        <h1 class="animated pulse">An animated element</h1>
        <h1 class="animated tada">An animated element</h1>
        <h1 class="animated wobble">An animated element</h1>
        <h1 class="animated swing">An animated element</h1>
        <h1 class="animated rotateInDownRight">An animated element</h1>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                isShow: false,
            },
            methods: {},
        });
    </script>
</body>

</html>

A &......

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue的使用02----vue生命周期，axios以及动画

vue的生命周期：1.1什么是生命周期？从Vue实例创建，运行，到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！1.2vue生命周期钩子函数：每个Vue实例在被创建时都要经过一系列的初始化过程----例如，需要设置数据监听、编译模板、将实例挂载在DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会；1.3vue的生命周期vue的生命周期可以分为8个过程，其中记忆的时候可以每两个在一块记忆：在上图中be.
复制链接

扫一扫