vue生命周期、vue请求、动画

前端小菜凯

已于 2022-09-23 09:34:04 修改

阅读量845

点赞数

文章标签： vue.js javascript 前端

于 2022-09-21 20:15:29 首次发布

本文链接：https://blog.csdn.net/gkx19898993699/article/details/126979340

版权

一、生命周期

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

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

3、vue生命周期
（1）创建前：beforeCreate（）{}
        初始化尚未完成，data数据、methods方法都未挂载在vue实例上（一般用于页面重定向）
（2）创建后：created（）{}
        第一个能够操作data数据的生命周期（一般用于接口请求+数据初始化）
（3）挂载前：beforeMount（）{}
        虚拟DOM挂载前，此时页面元素尚未更新
（4）挂载后：mounted（）{}

虚拟dom元素挂载后，如果需要操作dom，可以在此生命周期执行

（5）更新前：beforeUpdate（）{}

（6）更新后：updated（）{}
beforeUpdate和updated在页面初次渲染时并不执行，在更新时执行，故可执行0次或多次
（7）销毁前：beforeDestroy（）{}
一般用于清除计时器

（8）销毁后：destroyed（）{}
附：debugger 加入断点

<!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="../lib/vue-2.4.0.js"></script>
</head>
<body>
  <div id='app'>
    <div> {{msg}}</div>
    <input type="text" v-model="msg">
  </div>


  <script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg:'hello word!'
    },
    methods: {
    },
    // 初始化尚未完成，data数据，metheds方法都未挂在在vue实例上
    // 一般用于页面重定向
    beforeCreate(){
      console.log(1);
    },
    // 第一个能操作data数据的生命周期，
    // 一般用于接口请求+数据初始化
    created(){
      console.log(2);
    },
    // 虚拟dom挂载前，此时页面元素尚未更新
    beforeMount(){
      console.log(3);
    },
    // dom元素挂载后，如果需要操作dom，可以在此生命周期执行
    mounted(){
      console.log(4);
    },
    // 在页面初次渲染时并不执行，在更新时执行，故可执行0次或多次
    beforeUpdate(){
      console.log(5);
    },
    updated(){
      console.log(6);
    },
  })
  </script>
</body>
</html>

二、vue-resource的使用

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

1.get请求
this.$http.get('http://yapi.shangyuninfo.com/mock/36/web02/category').then(res => {
console.log(res.body);
})

//get请求
      this.$http.get(this.baseurl+'/weChat/applet/course/banner/list?number=4').then(res=>{
        console.log(res);
        this.imgSrc = res.data.data[0].imgUrlPc
        this.imgList = res.data.data
      })

2.post请求
this.$http.post(url, {categoryId: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});

//post请求
      this.$http.post(this.baseurl+"/weChat/applet/course/list/type",{type:'free',pageSize:10,pageNum:1},{ emulateJSON: true }).then(res=>{
        console.log(res);
        this.courseList = res.data.rows
      })

三、axios的使用

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
安装方法：
（1）使用 cdn:
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
（2）使用 npm:
npm install axios

1.get请求

//axios的get请求
      axios.get("http://1.117.81.216:8086/weChat/applet/course/banner/list?number=4").then(res=>{
        console.log(res);
        }
      )

2.post请求

（1）如果数据是form-url类型
let formurl = new URLSearchParams()
formurl .append('key','value')
formurl .append('key','value')...

let formurl = new URLSearchParams()
formurl .append('key','value')
formurl .append('key','value')
axios.post(this.baseurl+'/weChat/applet/course/list/type',formurl)

（2）如果数据是form-data类型
let formdata = new FromData()
formdata .append('key','value')
formdata .append('key','value')...

let formdata = new FromData()
formdata .append('key','value')
formdata .append('key','value')
axios.post(this.baseurl+'/weChat/applet/course/list/type',formdata )

（3）如果数据是JSON类型

axios.post(this.baseurl+"/weChat/applet/subject/list",{enable:1}).then(res=>{
    console.log(res);
})

当swiper中的轮播图初始化与请求同时进行时：应把轮播图的渲染写到请求成功后的执行语句中，且要利用$nextTick方法（在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。）

// 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
            this.$nextTick(() => {
              var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal', // 垂直切换选项
                loop: true, // 循环模式选项

                // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                },

                // 如果需要前进后退按钮
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },

                // 如果需要滚动条
                scrollbar: {
                  el: '.swiper-scrollbar',
                },
              })
            })

四、vue中的动画

（一）使用transition标签

  <div id='app'>
    <button @click="flag = !flag">点击</button>
    <transition>
      <div class="box" v-show="flag"> {{msg}}</div>
    </transition>
    <transition name="animateA">
      <div class="box" v-show="flag"> {{msg}}</div>
  </transition>
  </div>

（1）入场
v-enter
v-enter-to
v-enter-active

（2）退场
v-leave
v-leave-to
v-leave-active
以上六项写在style标签（css）中

<style>
    .v-enter {
      transform: translateX(-300px);
    }
    .v-enter-to {
      transform: translateX(0px);
    }
    .v-enter-active {
      transition: all 3s;
    }
    .v-leave {
      transform: translateX(0px);
    }
    .v-leave-to {
      transform: translateX(300px);
    }
    .v-leave-active {
      transition: all 3s;
    }
  </style>

若要控制不同的transition标签只需要给对应的加上name属性，再将css中原来v的位置替换成所写的name的值即可

  <style>
    .animateA-enter {
      transform: translateX(300px);
    }
    .animateA-enter-to {
      transform: translateX(0px);
    }
    .animateA-enter-active {
      transition: all 3s;
    }
    .animateA-leave {
      transform: translateX(0px);
    }
    .animateA-leave-to {
      transform: translateX(-300px);
    }
    .animateA-leave-active {
      transition: all 3s;
    }
  </style>

（二）使用第三方动画库

1.导入动画类库：

2.定义 transition 及属性：

<transition

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

（三）使用动画钩子函数

1.定义 transition 组件以及三个钩子函数：

<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">OK</div>
  </transition>
</div>

2.定义三个 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;
      }
}

3.定义动画过渡时长和样式：

.show{
transition: all 0.4s ease;
}

（四） v-for的列表过渡

列表使用<transition-group>标签

tag属性 规定transition标签内渲染后默认添加的列表外围的标签

1.定义过渡样式：

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

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

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

<div id="app">
  <input type="text" v-model="txt" @keyup.enter="add">
  <transition-group tag="ul" name="list">
    <li v-for="(item, i) in list" :key="i">{{item}}</li>
  </transition-group>
</div>

3.定义 VM中的结构：

  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {
      txt: '',
      list: [1, 2, 3, 4]
    },
    methods: {
      add() {
        this.list.push(this.txt);
        this.txt = '';
      }
    }
  });

（五）列表的排序过渡

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

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

前端小菜凯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫