Vue自定义指令写法与个人理解

// JS
Vue.directive('scroll', {
  inserted: function(el, binding) {
    let f = function(evt) {
      if(binding.value(evt, el)) {
        window.removeEventListener('scroll', f);
      }
    };
    window.addEventListener('scroll', f);
  }
});
// main app
new Vue({
  el: "#app",
  methods: {
    handleScroll: function(evt, el) {
      if(window.scrollY > 50) {
        TweenMax.to(el, 1.5, {
          y: -10,
          opacity: 1,
          ease: Sine.easeOut
        });
      }
      return window.scrollY > 100;
    }
  }
});
// HTML
<div class="box" v-scroll="handleScroll">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.</p>
</div>

为了让大家看得更清楚, 在这个代码片段中, 我们尽可能的保证它的简单易读. 在实际的APP中, 你可以构建非常友好的, 并且非常灵活的, 适合整个团队使用的自定义指令.

在实际的构建中, 我会将指令代码放在”main.js”文件中, 该文件位于”src”目录的根目录下(如果你使用的是Vue-cli构建工具), 那么”App.vue”以及组件目录中的所有的.vue文件都可以访问它. 当然, 还要其他方法可以使用它, 但是我发现对于整个应用程序来说, 这是最灵活的实现方式.

以上就是个人对Vue自定义指令的理解，希望对大家有所帮助