Fatal编程技术网
  • javascript/
  • 如何在我的vuejs组件中嵌入javascript代码？

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

javascript vue.js

如何在我的vuejs组件中嵌入javascript代码？,javascript,vue.js,Javascript,Vue.js,我是前端开发的新手，我正在使用Vue.js，我想创建一个粘性导航栏。我找到了，但没有找到如何将此JavaScript代码嵌入到我的.vue文件中 window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset &g

我是前端开发的新手，我正在使用Vue.js，我想创建一个粘性导航栏。我找到了，但没有找到如何将此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");
  }
}
我已经删除了数据中的navbar和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>


window.onscroll=function（）{myFunction（）}；
导出默认值{
姓名：“关于”，
数据（）{
返回{
navbar:document.getElementById（“navbar”），
粘性：navbar.offsetTop
}},
方法：{
handleScroll（活动）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}}
编辑：

我刚做完，现在整页都是空白的

这是整个.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>

<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>


向下滚动
向下滚动以查看粘性效果

粘性导航示例
当您到达滚动位置时，导航栏将粘在顶部

一些文本可以滚动。Lorem ipsum dolor sit amet，illum Definitions no quo，maluisset Conclutateturque et eum，altera fabulas ut quo.Atqui Cause Cause gloriatur ius te，id agam omnis Evertiur eum.Affer laboramus repudiandae nec et.Inderient efficiantur Equit.他设计的无分子Volupatibus

一些文本可以滚动。Lorem ipsum dolor sit amet，illum Definitions no quo，maluisset Conclutateturque et eum，altera fabulas ut quo.Atqui Cause Cause gloriatur ius te，id agam omnis Evertiur eum.Affer laboramus repudiandae nec et.Inderient efficiantur Equit.他设计的无分子Volupatibus

一些文本可以滚动。Lorem ipsum dolor sit amet，illum Definitions no quo，maluisset Conclutateturque et eum，altera fabulas ut quo.Atqui Cause Cause gloriatur ius te，id agam omnis Evertiur eum.Affer laboramus repudiandae nec et.Inderient efficiantur Equit.他设计的无分子Volupatibus

一些文本可以滚动。Lorem ipsum dolor sit amet，illum Definitions no quo，maluisset Conclutateturque et eum，altera fabulas ut quo.Atqui Cause Cause gloriatur ius te，id agam omnis Evertiur eum.Affer laboramus repudiandae nec et.Inderient efficiantur Equit.他设计的无分子Volupatibus

一些文本可以滚动。Lorem ipsum dolor sit amet，illum Definitions no quo，maluisset Conclutateturque et eum，altera fabulas ut quo.Atqui Cause Cause gloriatur ius te，id agam omnis Evertiur eum.Affer laboramus repudiandae nec et.Inderient efficiantur Equit.他设计的无分子Volupatibus

一些文本可以滚动。Lorem ipsum dolor sit amet，illum Definitions no quo，maluisset Conclutateturque et eum，altera fabulas ut quo.Atqui Cause Cause gloriatur ius te，id agam omnis Evertiur eum.Affer laboramus repudiandae nec et.Inderient efficiantur Equit.他设计的无分子Volupatibus

一些文本可以滚动。Lorem ipsum dolor sit amet，illum Definitions no quo，maluisset Conclutateturque et eum，altera fabulas ut quo.Atqui Cause Cause gloriatur ius te，id agam omnis Evertiur eum.Affer laboramus repudiandae nec et.Inderient efficiantur Equit.他设计的无分子Volupatibus

window.addEventListener（'scroll'，this.onScroll）；
导出默认值{
姓名：“关于”，
数据（）{
返回{
navbar:document.getElementById（“navbar”），
粘性：navbar.offsetTop
}},
方法：{
onScroll（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
} 
否则{
navbar.classList.remove（“粘性”）；
}
}
//滚动窗口时要执行的任何代码
}}
身体{
保证金：0；
字号：28px；
字体系列：Arial、Helvetica、无衬线字体；
}
.标题{
背景色：#f1f1；
填充：30px；
文本对齐：居中；
}
#导航栏{
溢出：隐藏；
背景色：#333；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
#导航栏a：悬停{
背景色：#ddd；
颜色：黑色；
}
#导航条a.激活{
背景色：#4CAF50；
颜色：白色；
}
.内容{
填充：16px；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}
我刚做完，现在整个页面都是空白的

这是整个.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>

<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>


向下滚动
向下滚动以查看粘性效果

粘性导航示例
当您到达滚动位置时，导航栏将粘在顶部

一些文本可以滚动。Lorem ipsum dolor sit amet，illum Definitions no quo，maluisset Conclutateturque et eum，altera fabulas ut quo.Atqui Cause Cause gloriatur ius te，id agam omnis Evertiur eum.Affer laboramus repudiandae nec et.Inderient efficiantur Equit.他设计的无分子Volupatibus

一些文本可以滚动。Lorem ipsum dolor sit amet，illum Definitions no quo，maluisset Conclutateturque et eum，altera fabulas ut quo.Atqui Cause Cause gloriatur ius te，id agam omnis Evertiur eum.Affer laboramus repudiandae nec et.Inderient efficiantur Equit.他设计的无分子Volupatibus

一些文本可以滚动。Lorem ipsum dolor sit amet，illum Definitions no quo，maluisset Conclutateturque et eum，altera fabulas ut quo.Atqui Cause Cause gloriatur ius te，id agam omnis Evertiur eum.Affer laboramus repudiandae nec et.Inderient efficiantur Equit.他设计的无分子Volupatibus

一些文本可以滚动。Lorem ipsum dolor sit amet，illum Definitions no quo，maluisset Conclutateturque et eum，altera fabulas ut quo.Atqui Cause Cause gloriatur ius te，id agam omnis Evertiur eum.Affer laboramus repudiandae nec et.Inderient efficiantur Equit.他设计的无分子Volupatibus

给我们一些文本