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的做法请留言，谢谢！