个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我是 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>问题是我的代码根本没有触发。不确定如何处理代码。
无论如何，如何以正确的方式触发 vue？
谢谢
最佳答案
您的代码中存在一个重大缺陷，导致其无法正常工作。尽管您创建了该组件，但您从未将其安装到实际的 HTML 中。在 Vue.component({...}) 下面添加以下行:
new Vue({ el: '#app' });
这会将 Vue 实例安装到 ID 为 app 的元素。但这又带来了另一个问题。
Vue 不允许挂载到 html 或 body 标记。您必须将正文中的所有 HTML 封装在 div(或其他元素)中，并为其提供 ID app
关于javascript - 如何触发 VueJ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53340147/
24
4
0
我试图将我的 VueJS 组件中的某些内容发送到位于包含该组件的 html 页面中的函数。我是否遗漏了什么，或者这是不可能的？ 在我的组件中作为方法: insert: function(){
完全遵循 docs的语言说明，我正在尝试以德语格式显示日期。相反，我仍然看到它是英文的:“12 Apr 2020”。 也尝试使用西类牙语，仍然得到“2020 年 4 月 12 日”。 我错过了什么吗？
我想从 Chart 对象访问 getValue 方法，但我得到的函数未定义。 import Vue from 'vue'; import C
我正在使用 laravel-vuejs 应用程序。当 vuejs 渲染 css 时，它会在 html head 中附加一些样式标签，如下图所示。有什么办法可以隐藏这个标签吗？我认为可以通过添加一些插件
我正在为 VueJS 创建一个加载栏插件，我想使用该插件控制 VueJS 组件(插件的一部分)的数据。 所以，最后我想做以下事情: 在 main.js 中包含插件 import VueLoadingB
如何使用 VueJs 和 VueJS-Router 为 Pimcore 进行扩展？ 到目前为止，前端的 vuejs 没有任何问题……但我无法让 VueJs-Router 运行。 有人有在 pimcor
也许你可以成为我一天的救世主。 我正在尝试为我的扩展实现 vue-components。 我不能包含自定义 Vue.js 组件。我关注了https://pagekit.com/docs/develop
我是 Laravel 和 VueJS 的新手，对于困惑的代码提前深表歉意。 我一直在尝试制作一个注册表单，并将 VueJS 集成到 laravel 中以使其更具动态性。现在我一直在尝试使用 {{ }}
我想使用函数作为数据属性。这似乎在“works”数据属性的情况下工作得很好。但是我需要函数中的 this 上下文，以便我可以计算存储在 this.shoppingCart (另一个属性)中的值。 这可
我正在尝试从另一个方法调用一个方法，为此我使用了它。但是我的控制台导致我出错。 如何在 Vuejs 中调用另一个方法中的方法？ 代码 methods: { searchLocations:
我已经使用 webpack_loader 创建了 Django 和 VueJS 集成项目。Django 在本地主机 8000 上运行，而 VueJS 在 8080 端口上运行。但是端口 8000 在控
我正在学习如何通过 udemy 类(class)制作单页应用程序，同时尝试做一个大学项目。问题是，在我的 Controller 中，我将数据库查询作为 json“alunos”发送到前端。现在，在 V
我有一个带有一些 html 的#app 容器，我在#app 上创建了 Vue 实例，所有内容都被编译并转换为 Vuejs 组件。然后我在另一个 html 字符串中使用 ajax，我需要以某种方式将其编
我有一个 symfony 2.8 应用程序，我最近集成了 VueJs 2 作为我的前端框架，因为它提供了很大的灵 active 。我的应用程序不是单页的，我使用 symfony Controller
好吧，我遇到了一个问题，虽然是一个奇怪的问题，但我到处都找不到答案。 我们被指派用 Vue.js 创建一个购物车，我已经完成了我自己开始了这个项目，想看看我能用 vuejs 做什么。问题出现在页面加载
逻辑 我有带有输入作为标签的复选框，其值来自数据库，因此文本(值)已经存在。 (完成) 我想列一份检查项目 list (完成) 我想如果我改变了一个项目的值得到改变的值，但它仍然给我数据库的值(需要帮
我正在尝试在页面上显示公告列表(从 API 检索)。我正在使用 Vuex 商店，我有一个名为 announcements 的状态。我还希望每次用户刷新/进入页面时更新此列表。所以我使用了生命周期钩子(
使用单文件模板，我希望有一个按钮，如果数组为空，则显示“单击此处”，如果数组已填充，则显示值。 ajax 工作正常并且对象正在更新，但按钮不会重新呈现。我在这里做错了什么？ Mobil
在 VueJS 中，有没有办法在模板或脚本中将字符串插入字符串？例如，我希望以下内容显示 1 + 1 = 2 而不是 1 + 1 = {{ 1 + 1 }}。 {{ myVar }}
我在我的项目中使用 VueJS 2，我意识到我的构建部署很糟糕。 这是我在 github 上部署我的 VueJS 构建的脚本: #!/usr/bin/env sh # abort on errors
我是一名优秀的程序员,十分优秀！