javascript - 如何在我的vuejs组件中嵌入JavaScript代码？

Question

我是前端开发的新手，正在使用Vue.js，我想创建一个粘性导航栏。我找到了this method，但没有找到如何将此JavaScript代码嵌入到我的.vue文件中。

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

我在数据中删除了导航栏和粘性变量，并在方法中删除了函数，但是它不起作用。

<script>
window.onscroll = function() {myFunction()};

export default {
  name: "About",
  data() {
    return {
      navbar : document.getElementById("navbar"),
      sticky : navbar.offsetTop

    }},
    methods: {
       handleScroll (event) {
         if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }

    }}
<script>

编辑:

我刚刚完成，整个页面现在空白

这是整个.vue文件

<template>
  <div class="about">
    <div class="header">
     <h2>Scroll Down</h2>
      <p>Scroll down to see the sticky effect.</p>
    </div>

    <div id="navbar">
      <a class="active" href="javascript:void(0)">Home</a>
      <a href="javascript:void(0)">News</a>
      <a href="javascript:void(0)">Contact</a>
    </div>

    <div class="content">
      <h3>Sticky Navigation Example</h3>
      <p>The navbar will stick to the top when you reach its scroll position.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    </div>
  </div>
</template>

<script>
window.addEventListener('scroll', this.onScroll);

export default {
  name: "About",
  data() {
    return {
      navbar : document.getElementById("navbar"),
      sticky : navbar.offsetTop

    }},
    methods: {
       onScroll () {
         if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } 
  else {
    navbar.classList.remove("sticky");
  }

    }
      // Any code to be executed when the window is scrolled

  }}


</script>

<style scoped>
  body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
</style>

Answer 1

您可以尝试这样的事情:

<script>
export default {
    data: {},
      mounted: function() {
        window.addEventListener('scroll', this.scrollHandle)
      },
      methods: {
          scrollHandle() {
              var navbar = document.getElementById("navbar");
              var sticky = navbar.offsetTop;

              if (window.pageYOffset >= sticky) {
                  navbar.classList.add("sticky")
              } else {
                    navbar.classList.remove("sticky");
              }
          },
      }
}
</script>

您可以在已安装的函数中设置事件处理程序，以便在组件完全加载之前运行它。这样，您就可以像Vanilla js示例中那样在所需的位置滚动。

尽管这将起作用，但是您应该尝试避免操纵 DOM，因为VUE使用 VirtualDOM。考虑到更好的做法，这是一个好习惯，如果以后需要重新访问组件，您会发现它使以后的维护变得更加容易。

作为使用JS和DOM操作的替代方法，您可以研究将 CSS position:sticky用于CSS方法，而不是使用javascript处理。像这样的东西可以从CSS中解决问题:

<template>
    ...
    <div id="nav" class="sticky">
       ...
    </div>
    ...
</template>
<style>
...
.sticky {
    position: sticky;
    top: 0em;
}
...
<style>