给窗口添加滑动事件

第一步，在mounted函数中声明我们要进行监听的事件以及回调函数：

mounted() {window.addEventListener("scroll", this.scrollChange)//写法一document.addEventListener("scroll", this.scrollChange)//写法二

第二步在methods中定义我们刚刚写的scrollChange方法，并实现输出功能

 methods: {scrollChange() {this.scroll = document.documentElement.scrollTop || document.body.scrollTop;console.log(this.scroll)}}
}

不要有局限性，获取滑动高度的方法不止上面那一种，我们在js中学过很多.

给某元素内部监听滑动 🔥

比如我们给一个div元素设置100px的高度，然后里面的内容大于100px，这时候div就会显示上下滚动条，我们需求是监听div内部的滑动事件：
第一步：使用v-on给div绑定滑动事件
简写如下：（CSS与内容略）

<div id="box"  @scroll="scrollEvent"></div>

第二步，同样是在mounted函数中声明我们要进行监听的事件以及回调函数，这次监听的对象是div

 mounted() {/*为#box添加监听滚动事件*/let box = document.querySelector("#box")box.addEventListener("scroll", this.scrollEvent)},

第三步，在methods中定义我们刚刚写的scrollEvent方法，并实现输出功能

methods: {scrollEvent() {let box = document.querySelector("#box")if(box.scrollTop>260){console.log(box.scrollTop)}}}

同样的，我们在if里面可以定义我们需要的事件，比如添加动画呀，弹出窗口啊等等事件

✍ 今天的小课堂到此结束啦，

🔥 明天的内容：vue里面使用Velocity.js给元素设置动画效果