vue中引用js_在Vue.js项目中使用Wow.js实现页面滚动动画

wow.js官网：

Reveal Animations When Scrolling​www.delac.io

wow.js GitHub地址：

https://github.com/matthieua/WOW​github.com

第一步：安装wow.js NPM包：

在命令行中执行：

npm install animate.css --save

第二步：引入及使用：

在main.js中引入：

// 省略部分代码
import wow from 'wowjs'
 
import 'animate.css'
 
Vue.prototype.$wow = wow
 
// 将wow挂载到Vue，这样我们可以在组件中通过this.$wow使用wow.js。
 
// 当然也可通过在组件中使用import wow from 'wowjs' 或者import {wow} from 'wowjs'来使用。

在vue页面中使用：

<!-- template -->
 
<div class="hello_world" >
    <section class="wow slideInLeft" data-wow-duration="1s" >
    </section>
        <section class="wow slideInLeft" data-wow-duration="2s" >
    </section> 
        <section class="wow slideInLeft" data-wow-duration="1s" >
    </section> 
        <section class="wow slideInLeft" data-wow-duration="2s" >
    </section> 
        <section class="wow slideInLeft" data-wow-duration="1s" >
    </section>
</div>

// script

export default {
  name:'Home',
  data() {
      return {
      }
  },
  mounted(){
      new this.$wow.WOW().init()
  }
}