我使用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>
我的应用.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")移至向下有帮助。但是有更好的变体吗？还是没关系？
实际上有两种方法可以处理它。一种是将脚本移动到页面底部，第二种是在加载页面时使用事件触发代码。
这些天，您通常侦听要加载的页面(没有jQuery(的方式是侦听DOMContentLoaded事件。
document.addEventListener("DOMContentLoaded", function() {
var app = new Vue(...)
});
DOMContentLoaded和load事件之间的主要区别在于，当解析完所有 DOM 内容时，DOMContentLoaded触发，load事件等待加载所有内容，包括图像、样式表和其他内容。