我用的是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
我做错了什么?
当前回答
我已经通过添加属性'defer'到'script'元素解决了这个问题。
其他回答
我认为有时候愚蠢的错误会导致这种错误。
<div id="#main"> <--- id with hashtag
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
To
<div id="main"> <--- id without hashtag
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
有两种解决方法。
确保你把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'元素解决了这个问题。
得到同样的错误。解决方案是将脚本代码放在正文结尾之前，而不是放在头部部分。
