vue生命周期和vue-resource

最新推荐文章于 2024-04-29 16:49:44 发布

李时一

最新推荐文章于 2024-04-29 16:49:44 发布

阅读量204

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Llishiyi/article/details/122351252

版权

1、什么是生命周期

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

2、vue生命周期钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

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

3、vue生命周期

详解：

代码段

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="msg">
    </div>
    <script>
        // 什么是生命周期？
        // 从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
        const vm = new Vue({
            el: '#app',
            data: {
                msg: "さしぶり"
            },
            methods: {
                demo() {
                    console.log(demo);
                },
            },
            // 生命周期
            beforeCreate() {
                //初始化前
                // 第一个生命周期 vue实例刚创建，但是data数据没有挂载 ，所以拿不到 data和methods
                // 一般用来重定向
                console.log("beforeCreate");
            },
            Created() {
                // 初始化完成
                // 这是第一个能拿到data和methods 的生命周期   一般用于接口请求和数据初始化
                console.log("Created");
            },
            beforeMount() {
                // 挂载前
                console.log("beforeMount");
            },
            mounted() {
                // 挂载完成
                // 一般要求依赖dom的操作要放在这里
                console.log("mountd");
            },
            // 这两个生命周期执行 0次 或 更多次
            beforeUpdate() {
                // 更新前
                console.log("beforeUpdate");
                console.log(this.msg);
            },
            updated() {
                // 更新后
                console.log("updated");
                console.log(this.msg);
            },
            beforeDestory() {
                // vue销毁之前  一般用与清除计时器，清除数据监听和事件监听
                console.log("beforeDestory");
            },
            destoryed() {
                // 销毁之后
                console.log("destoryed");
            }
        })
    </script>
</body>

</html>

4. vue-resource的使用

直接在页面中，通过script标签，引入vue-resource的脚本文件；
注意：引用的先后顺序是 - 先引用Vue的脚本文件，再引用vue-resource的脚本文件

GET请求

getInfo() { 
           // get 方式获取数据
                    this.$http.get('http://yapi.shangyuninfo.com/mock/36/web02/category').then(res => {
             console.log(res.body);
                    })
                }

POST请求

postInfo() {
                    var url = ' http://yapi.shangyuninfo.com/mock/36/web02/list/goods/category';
                    // post 方法接收三个参数：
                    // 参数1： 要请求的URL地址
                    // 参数2： 要发送的数据对象
                    // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
                    this.$http.post(url, {
                        categoryId: 'zs'
                    }, {
                        emulateJSON: true
                    }).then(res => {
                        console.log(res.body);
                    });
                }

5.axios的使用

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

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

示例

<!DOCTYPE html>
<html>

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

<body>
    <div id='app'>
        <div v-for="item in list" :key=item.id>
            {{item.category}}
        </div>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                list: []
            },
            methods: {},
            created() {
                // GET
                axios.get("http://yapi.shangyuninfo.com/mock/36/web02/category").then(res => {
                    this.list = res.data.data
                })
                // post 只有两个参数 1 地址 2 请求体
                // 通过内置对象，创建对应格式的请求体
                //URLSearchParams对应的请求格式application/x-www-form-urlencoded
                let url = new URLSearchParams()
                url.append("type", "free")
                url.append("pageNum", 1)
                url.append("pageSize", 5)
                let form = new FormData()
                // append两个参数 1 属性名 2 属性值 中间是逗号
                form.append("type", "free")
                form.append("pageNum", 1)
                form.append("pageSize", 5)
                axios.post("http://wkt.myhope365.com/weChat/applet/course/list/type",form).then(res=>{
                    console.log(res);
                })
                let json = {"enable":1}
                axios.post("http://wkt.myhope365.com/weChat/applet/subject/list",json).then(res=>{
                    console.log(res);
                })
            }
        })
    </script>
</body>

</html>

6.Vue中的动画

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .v-enter-to,
        .v-leave {
            transform: translateX(0);
        }
        .v-enter-active,
        .v-leave-active {
            transition: all 7s;
        }
        .v-leave-to,
        .v-enter {
            transform: translateX(200px);
        }
        /* 如要效果不同  则要加不同的name */
        .leftenter-enter {
            transform: translateX(-100px);
        }
        .leftenter-enter-to {
            transform: translateX(0);
        }
        .leftenter-enter-active {
            transition: all 2s;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <button @click="flag = !flag">点一点</button>
        <transition :duration="{enter: 5000, leave: 8000 }">
            <h3 v-if="flag">私は第二六道仙人</h3>
        </transition>
        <transition name="leftenter">
            <h3 v-if="flag">今は唯一の存在</h3>
        </transition>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                flag: true,
            },
            methods: {}
        })
    </script>
</body>

</html>

使用第三方css动画库

官方文档

使用动画钩子函数

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .show {
            transition: all 7s ;
        }
    </style>
</head>
<body>
    <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">始めた</div>
        </transition>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                isshow: true
            },
            methods: {
                beforeEnter(el) {
                    // 动画进入之前的回调
                    el.style.transfrom = "translateX(500px)"
                },
                enter(el, done) {
                    // 动画进入完成时候的回调   检测dom存在  el.offsetWidth
                    el.offsetWidth
                    el.style.transfrom = "translateX(0px)"
                    // done()方法调用表示完成
                    done()
                },
                afterEnter(el) {
                    // 动画进入完成之后的回调
                    // this.isshow = !this.isshow;
                }
            }
        })
    </script>
</body>

</html>

v-for的列表过渡和排序过度

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .v-move {
            transition: all 7s ease;
        }
        .v-leave-active {
            position: absolute;
        }
    </style>
</head>
<body>
    <div id='app'>
        <button @click="flag=!flag">点一点</button>
        <transition-group>
            <h3 v-for="item in list" :key="item" v-if="flag">
              {{item}}私は第二六道仙人
            </h3>
          </transition-group>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                flag:true,
                list: ["いち", "に", "さん", "よ", "ご", "ろく", "なな", "はち", "きゅう", "じゅう"]
            },
            methods: {}
        })
    </script>
</body>

</html>

李时一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue生命周期和vue-resource

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

扫一扫