关注公众号
不定期副业成功案例分享
我正在使用 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
我究竟做错了什么？
我认为问题在于您的脚本是在目标 dom 元素加载到 dom 之前执行的……原因之一可能是您已将脚本放在页面头部或放在 div 元素之前的脚本标记中#main。因此，当脚本执行时，它将无法找到目标元素，因此会出现错误。
一种解决方案是将您的脚本放在加载事件处理程序中，例如
window.onload = function () {
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
}
另一种语法
window.addEventListener('load', function () {
//your script
})
我通过将属性 'defer' 添加到 'script' 元素解决了这个问题。
我犯了同样的错误。解决方案是将脚本代码放在正文结束之前，而不是放在头部。
简单的事情是将脚本放在文档下方，就在结束 </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'
}
});
您可以通过两种方式解决它。
确保将 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 文件或 html 文件中编写的相同 javascript 代码放入其中。
在 JavaScript 文件中使用 window.onload 函数。
我认为有时愚蠢的错误会给我们这个错误。
<div id="#main"> <--- id with hashtag
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
至
<div id="main"> <--- id without hashtag
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
不定期副业成功案例分享
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
addEventListener方法在“技术上”是一种更易于维护的方法，因为它不会覆盖全局window.onload属性。<head></head>部分中包含 Webpack 捆绑脚本是导致我出错的原因。等待加载窗口正在工作。