1.首先下载wow插件

下载命令：npm install wowjs --save-dev

2.在项目中的main.js中进行配置

import 'wowjs/css/libs/animate.css'
import wow from 'wowjs'
Vue.prototype.$wow = wow

3.使用方法

1.在需要使用的页面中的mounted函数加入代码

 mounted() {
    this.getList();
    this.$nextTick(() => {
      new this.$wow.WOW().init();
    });
  },

2开始使用（在class上面加入 wow 动画参数）

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>

类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。?

注意（如果是循环遍历的数据就需要用watch监听来实现）

<template>
  <div class="app">
    <div class="classify">
      <div class="wrap">
        <div class="title">
          <span>classify Worthy</span>
        </div>
        <div class="classifyInfo">
          <div
            :class="'list' + item.bounceInUp"
            :data-wow-delay="item.delay"
            v-for="(item, index) in classifyInfo"
            :key="index"
          >
            <div class="img">
              <img :src="item.url" alt="" />
            </div>
            <div class="text">
              <span>{{ item.title }}</span>
              <p>{{ item.content }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classifyInfo: "",
    };
  },
  methods: {
    getList() {
      this.$axios
        .get("/dataInfo.json")
        .then((res) => {
          this.classifyInfo = res.data.Home.classify;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  watch: {
    classifyInfo() {
      this.$nextTick(() => {
        new this.$wow.WOW().init();
      });
    },
  },
  mounted() {
    this.getList();
    this.$nextTick(() => {
      new this.$wow.WOW().init();
    });
  },
  created() {},
};
</script>