vue生命周期、axios、vue动画---day03

疾风小蜗牛

已于 2022-09-22 20:49:11 修改

阅读量288

点赞数

分类专栏： vue 前端文章标签： vue.js 前端 javascript

于 2022-09-22 20:35:30 首次发布

本文链接：https://blog.csdn.net/Wr2138/article/details/126998974

版权

本文详细介绍了Vue的生命周期，包括beforeCreate、created、mounted等8个生命周期钩子函数。同时，对比了Vue1的vue-resource和Vue2的axios请求方式，包括安装和get/post请求的使用。此外，还探讨了Vue中的动画处理，如过渡类名、第三方CSS动画和动画钩子函数的应用。

摘要由CSDN通过智能技术生成

二、VUE1的请求方式：vue-resource的使用

1、安装方法

2、get请求

3、post请求

三、VUE2.x的请求方式：axios的使用

今日总结

一、VUE生命周期

1、什么是生命周期

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

2、vue生命周期钩子函数

每个 vue 实例在被创建时都要经过一系列的初始化过程

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

3、vue生命周期

详解

一共8个生命周期函数：

beforeCreate：表示，刚初始化了一个 Vue 空的实例化对象，这个时候，这个对象身上，只有默认的一些生命周期函数和默认的事件，其他东西都未创建。注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化。一般用于页面重定向

created：在 created 中，data和methods都已经被初始化好了。如果要调用methods中的方法，或者操作data中的数据，最早，只能在created中操作 一般用于接口请求 + 数据初始化

beforeMount：此函数在执行的时候，模板已经在内存中编译好了（虚拟DOM）。但是尚未挂载到页面中去，此时，页面还是旧的

mounted：这一步，将内存中编译好的模板，真实的替换到浏览器的页面中去。如果要通过某些插件操作页面上的DOM节点了。最早要在mounted中进行。只要执行完了mounted，就表示整个Vue实例已经初始化完毕了；此时，组件已经脱离了拆昂见阶段，进入到了运行阶段

beforeUpDate：当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时，data数据是最新的，页面上为和最新的数据保持同步

updated：该事件执行的时候，页面和data数据已经保持同步了，都是最新的

beforeUpDate 和 updated 是组件运行阶段的生命周期函数，只有这两个，这两个事件会根据data数据的改变，有选择性地触发0次到多次（页面初始化的时候不会触发）

beforeDestroy：当执行beforeDestroy钩子函数的时候，Vue实例就已经从运行阶段进入到了销毁阶段，当执行beforeDestroy的时候，实例身上所有的data和所有的methods，以及过滤器、指令…… 都处于可用状态。此时。还没有真正执行销毁的过程

destroyed：当执行到该函数时，组件已经被完全销毁了，此时，组件中所有的数据、方法、指令、过滤器……都已经不可用了

由官方文档给出的生命周期图示，可以看出：

// 当 Vue 对象中没有写 el 时，可以在使用下面方法使用 可以搭配定时器使用

// vm.$mount('#app')

示例：

<!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>生命周期</title>
</head>
<body>
  <div id="app">
    <div>{
    {msg}}</div>
    <input type="text" v-model="msg">
  </div>
</body>
<script>
  let vm = new Vue({
    el:'#app',
    data:{
      msg:'hello world!'
    },
    methods:{},
    // 生命周期
    // 初始化尚未完成，data数据，methods方法都未挂载在vue实例中
    // 一般用于页面重定向
    beforeCreate(){
      console.log('beforeCreate');
      console.log(this.msg);
    },
    // 第一个能操作data数据的生命周期，
    // 一班用于接口请求 + 数据初始化
    created(){
      console.log('created');
      console.log(this.msg);
    },
    // 虚拟dom挂载前，此时页面元素尚未更新
    beforeMount(){
      console.log('beforeMount');
      // debugger
    },
    // dom元素挂载之后，如果需要操作dom，可以在此生命周期执行
    mounted(){
      console.log(mounted);
    },
    // 初次加载页面时不会加载，可以执行 0次到多次
    beforeUpdate(){
      console.log(beforeUpdate);
    },
    updated(){
      console.log(updated);
    }
  })

  // 当 Vue 对象中没有写 el 时，可以在使用下面方法使用  可以搭配定时器使用
  // vm.$mount('#app')

</script>
</html>

二、VUE1的请求方式：vue-resource的使用

1、安装方法

使用cdn/本地文件

注意：vue-resource文件是依赖vue文件的，注意引入顺序要在引入的vue文件下面

2、get请求

this.$http.get(url).then(res=>{})

3、post请求

this.$http.post(url,data,xxx).then(res=>{})

post 请求体格式转换时 xxx 为 { emulateJSON : true }，不需要转换就不用写

示例：

<!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>vue1请求方式</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 注意引入顺序 -->
    <script src="./lib/vue-resource-1.3.4.js"></script>
    <style>
      dl{
        width: 1200px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      dt{
        width: 19%;
      }
      img{
        width:100%;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-for="item in carouselList&#