vue生命周期和vue-resource

最新推荐文章于 2023-09-14 14:35:14 发布

追逐的小鸟

最新推荐文章于 2023-09-14 14:35:14 发布

阅读量119

点赞数 1

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Releases_1/article/details/118154032

版权

前言

本章目标

掌握生命周期函数的使用
掌握vue-resource的使用
掌握axios的使用

1、什么是生命周期？

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

2、vue生命周期钩子函数

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

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

3、vue生命周期

在这里插入图片描述

<body>
  <div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{ msg }}</h3>
  </div>
  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'ok'
      },
      methods: {
        show() {
          console.log('执行了show方法')
        }
      },
      beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
        // console.log(this.msg)
        // this.show()
        // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
      },
      created() { // 这是遇到的第二个生命周期函数
        // console.log(this.msg)
        // this.show()
        //  在 created 中，data 和 methods 都已经被初始化好了！
        // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
      },
      beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
        // console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
      },
      mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
        // console.log(document.getElementById('h3').innerText)
        // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
      },
      // 接下来的是运行中的两个事件
      beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
        /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg) */
        // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
      },
      updated() {
        console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg)
        // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
      }
    });
  </script>

4、vue-resource的使用

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

    created() {
          // 接口请求。数据初始化

          this.$http
            .get(
              "http://wkt.myhope365.com/weChat/applet/course/banner/list?number=4"
            )
            .then((res) => {
              //   console.log(res);
              console.log(res.body.data);
              //   this.imgSrc = res.body.data[0].imgUrlPc

              this.imgList = res.body.data;
            });

          // post请求

          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);
              this.courseList = res.body.rows;
            });
        },

5、axios的使用的使用

created() {
          // 接口请求
          axios
            .get(
              "http://wkt.myhope365.com/weChat/applet/course/banner/list?number=4"
            )
            .then((res) => {
              //   console.log(res);
              this.imgList = res.data.data;
            });

          // post

            	  let form = new FormData();
               或 let form = new URLSearchParams();

          // 添加属性 append
          form.append("type", "free");
          form.append("pageSize", 10);
          form.append("pageNum", 1);

          axios
            .post(
              "http://wkt.myhope365.com/weChat/applet/course/list/type",
              form
            )
            .then((res) => {
                console.log(res);
            });

          axios
            .post("http://wkt.myhope365.com/weChat/applet/subject/list", {
              enable: 1,
            })
            .then((res) => {
            //   console.log(res);
            });
        },

6、vue中的动画

6.1 引入外部的animate.css动画

1.HTML结构：
使用 transition 将需要过渡的元素包裹起来
transiton name=" "
2.创建VM示例：
enter enter-active enter-to
leave leave-active leave-to

methods: {
  myAnimate() {
    this.isshow = !this.isshow;
  }

style中添加样式

 .fade-enter-active,
  .fade-leave-active {
    transition: all 0.2s ease;
    position: absolute;
  }

6.2 使用第三方css动画库
定义 transition 及属性

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

6.3 使用动画钩子函数
定义三个 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;
      }
}

6.4 v-for的列表过渡

<style>
  .list-enter,
  .list-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }

  .list-enter-active,
  .list-leave-active {
    transition: all 0.3s ease;
  }
</style>

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

6.5 列表的排序过渡
transition-group 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。

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