vue中的滚动监听

写项目的时候经常会用到滚动监听，那在vue中怎么做到呢？
我自己写了一个，效果：

很丑，是吗？
是！

---

首先我们要有一个函数

methods：{    scrollto（）{        console.log(document.body.scrollTop);        //这个只是看一下我们的函数在起作用    }}

mounted(){    window.addEventListener('scroll',this.scrollto)}

这个时候就来一波测试了
正常的话就可以看到一堆数字

---

当滚动到一定程度的时候，就可以搞一些事情了

methods：{    scrollto（）{        var a = document.body.scrollTop        console.log(a);        if(a >= 230){            this.isShow = true;            //换个样式，怎么样？        }else{            this.isShow = false;        }    }}

.cur{        border-top:1px solid red;        background-color:#000;        position: fixed;        top: 0;        left: 0;        a{            color:white;            text-decoration: none;        }    }    //我用的less，正常css一样效果

<div     class="nav-bar"     id="nav-bar"     v-bind:class="{cur:isShow}">    。。。</div>

到这个滚动的效果就出来了（我没用设计师，所以做出来的就很丑）。

---

还有锚点，监听滚动的时候一般都有吧。

刚好我也有

代码：

<li>    <a href="javascript:;" @click="goAnchor('001')">one</a></li><li>    <a href="jsvascript:;" @click="goAnchor('002')">two</a></li><li>    <a href="javascript:;" @click="goAnchor('003')">three</a></li>

这里面有个函数，那就要定义函数了

methods：{    goAnchor(selector) {         var anchor = document.getElementById(selector)         document.body.scrollTop = anchor.offsetTop-50;    }}

基本完事了，别忘了传参，id还是不能少的

最后一件事
跳转其他页面之前移除绑定的事件

destoryed(){    window.removeEventListener('scroll',this.scrollto)    //移除时的事件和函数要跟添加时一致，匿名函数不管用}

---

这个基本都是DOM操作，和vue的观念好像不太符合
谁有更贴切vue的做法请留言，谢谢！