Vue自定义指令实现下拉加载：v-loadmore

和methods平级:

    directives: {
        loadmore: {//自定义指令: 下拉加载
            bind(el, binding) {   
                var p = 0;   
                var t = 0;   
                var down = true;   
                var selectWrap = el.querySelector('.selectPhaseBox .el-scrollbar__wrap');
                selectWrap.addEventListener('scroll', function() {     
                    //判断是否向下滚动     
                    p = this.scrollTop;  
                    if(t < p){       
                        down = true;     
                    }else{       
                        down = false;     
                    }     
                    t = p;     
                    //判断是否到底     
                    const sign = 10;     
                    const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;     
                    if (scrollDistance <= sign && down) {       
                        binding.value()     
                    }   
                }); 
            }
        }
    }　　

注意点：

1.通过querySelector来监测滚动框

2.使用v-loadmore="loadmore"来执行回调函数，其中loadmore可以自定义业务逻辑，其中v-loadmore指令要放到监测的组件父级上

3.局部自定义指令放在组件文件里面，全局自定义指令放在main.js里面用Vue.directives的方式。

总结：

1.在 Vue2.0 中，代码复用和抽象的主要形式是组件。

2.3层：指令 ==》钩子函数(某个时间点，bind，inserted，unbind) ==》钩子的参数(el，binding)

参考链接：https://www.jianshu.com/p/4f0142d737a0

官方参考链接：https://cn.vuejs.org/v2/guide/custom-directive.html