代码之家 › 专栏 › 技术社区 › Yudy Ananda

如何启动VueJs

vue.js javascript

Yudy Ananda · 技术社区 · 7 年前

我是vuejs新手,在本例中,我尝试使用vuejs实现滚动指示器

<html>
    <head>
    </head>
    <body id="app">
        <indicator></indicator>
      <main>Ut deserunt mollit ham, sunt exercitation veniam reprehenderit commodo. Ullamco chicken andouille t-bone in. Pork nulla spare ribs reprehenderit chicken alcatra sed, bacon meatball pork belly pork chop kielbasa prosciutto. Sunt jerky excepteur cupim sirloin laborum tempor pork cillum turkey porchetta ipsum dolore. Short ribs leberkas velit voluptate ham ham hock. Occaecat sirloin tongue andouille corned beef bacon capicola sausage, ullamco pork tail incididunt. Officia turducken meatloaf duis dolore pig aute enim kevin rump. In culpa eiusmod aliquip chicken pariatur rump quis. Qui adipisicing nostrud t-bone cupim, shoulder cillum velit. Magna tri-tip sausage, do incididunt brisket ham capicola leberkas consectetur. Elit pork chop kevin, pork belly do jowl fugiat. Fugiat beef tail bresaola pork loin venison short ribs meatloaf veniam nulla commodo flank. Hamburger eu velit shank. Commodo pork chop est et anim ball tip pancetta qui pig. Tail eu pancetta tempor, ex id nulla esse spare ribs nostrud. Jerky cow ea chicken, strip steak nisi swine jowl do. Strip steak beef ribs aliquip hamburger jowl bacon shankle prosciutto et dolore tri-tip pastrami sausage. Pig magna hamburger, irure brisket pork loin aliqua nulla kevin tongue qui aliquip ham. Dolore commodo boudin spare ribs occaecat. Corned beef laborum prosciutto</main>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
   Vue.component('indicator', {
  template:'<div id="indicator"></div>',
  mounted:function(){
    var vm = this
    window.addEventListener('scroll', function(e){
      var scrollPos = window.scrollY
      var winHeight = window.innerHeight
      var docHeight = document.documentElement.scrollHeight
      var perc = 100 * scrollPos / (docHeight - winHeight)
      vm.$el.style.width = perc + '%'
    })
  }
})
new Vue({
el: '#app'
});
   </script>
  
    </body>
</html>

非常感谢。

2 回复 | 直到 7 年前

T. Dirks 7 年前

您的代码中有一个主要缺陷使其无法工作。即使创建组件,也不会将其装载到实际的HTML中。低于 Vue.component({...}) 添加此行:

new Vue({ el: '#app' });

这将把Vue实例装载到ID为的元素上 app . 然而,这带来了另一个问题。

html 或 body 标签。您必须将正文中的所有HTML封装在一个div(或其他元素)中,并为其提供ID

chrisg86 7 年前

new Vue({
    el: '#app'
});

如果您保留此选项,则不会有任何内容绑定到您的应用程序容器。此外,您不应该直接绑定到 body 标记并创建一个新的空 div 内部把身份证给它 app .

https://vuejs.org

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前