Pug (Jade)基HTML页面:无法找到元素：#app
Pug (Jade)基HTML页面:无法找到元素：#app
提问于 2017-07-24 14:23:47
我使用vibed服务器。它使用Pug预处理器(以前称为Jade)。这是我的页面代码：
doctype html
html
head
script(src="https://unpkg.com/vue")
script(src="app.js")
title Hello, World
body
h1 Hello World
#app
|{{message}}它生成下一个HTML输出：
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue"></script><script src="app.js"></script><title>Hello, World</title>
</head>
<body>
<h1>Hello World</h1>
<div id="app">
{{message}}
</div>
</body>
</html>我的app.js代码：
window.onload = function() {
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
app.$mount('#app');
}但这不管用。在浏览器控制台中，我将得到下一个错误：Cannot find element: #app
upd:将script(src="app.js")移动到下一个有帮助。但是还有更好的变体吗？还是没事？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-24 15:25:37
其实有两种方法来处理它。一个是将脚本移动到页面底部，另一个是在加载页面时使用事件触发代码。
现在(不使用jQuery)通常侦听要加载的页面的方式是侦听DOMContentLoaded事件。
document.addEventListener("DOMContentLoaded", function() {
var app = new Vue(...)
});DOMContentLoaded和load事件之间的主要区别是，当所有DOM内容都已被解析时，DOMContentLoaded会触发，而load事件则等待加载所有内容，包括图像、样式表和其他内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45283086
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号