我用的是Vuejs。这是我的加价:
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
</body>
这是我的代码:
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
})
;
当我加载页面时，我得到这个警告:
[Vue warn]: Cannot find element: #main
我做错了什么?
当前回答
有两种解决方法。
确保你把CDN放在html页面的末尾，然后把你自己的脚本放在后面。例子:
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="js/app.js"></script>
你需要把相同的javascript代码写在任何其他javascript文件或html文件。
使用窗口。JavaScript文件中的onload函数。
其他回答
简单的方法是将脚本放在文档下面，就在</body>结束标记之前:
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
<script src="app.js"></script>
</body>
app.js文件:
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
我已经通过添加属性'defer'到'script'元素解决了这个问题。
有两种解决方法。
确保你把CDN放在html页面的末尾，然后把你自己的脚本放在后面。例子:
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="js/app.js"></script>
你需要把相同的javascript代码写在任何其他javascript文件或html文件。
使用窗口。JavaScript文件中的onload函数。
得到同样的错误。解决方案是将脚本代码放在正文结尾之前，而不是放在头部部分。
我认为问题是你的脚本是在目标dom元素被加载到dom之前执行的…一个原因可能是您将脚本放在页面的头部，或者放在div元素#main之前的脚本标记中。因此，当脚本执行时，它将无法找到目标元素，从而出现错误。
一种解决方案是将脚本放在加载事件处理程序中，如
window.onload = function () {
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
}
另一个语法
window.addEventListener('load', function () {
//your script
})
