Javascript [Vue warn]：找不到元素_Javascript_Mvvm_Vue.js

Javascript [Vue warn]：找不到元素

javascript mvvm vue.js

Javascript [Vue warn]：找不到元素,javascript,mvvm,vue.js,Javascript,Mvvm,Vue.js,我正在使用。这是我的标记： <body> <div id="main"> <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div> </div> </body> 加载页面时，我收到以下警告： [Vue warn]: Cannot find element: #main 我做错了什么？我认为问题是在目标d

我正在使用。这是我的标记：

<body>
  <div id="main">
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
  </div>
</body>

加载页面时，我收到以下警告：

[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
})

我也犯了同样的错误。解决方法是将脚本代码放在正文的末尾之前，而不是放在标题部分。

我通过在“script”元素中添加属性“defer”解决了这个问题。

简单的方法是将脚本放在文档下方，就在结束标记之前。

标记：
<body>
   <div id="main">
      <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
   </div>
   <script src="app.js"></script>
</body>

你可以用两种方法来解决它
确保将CDN放在html页面的末尾，然后放置自己的脚本。例如：


您需要将编写的相同javascript代码放入任何其他javascript文件或html文件中
在JavaScript文件中使用函数
我认为有时愚蠢的错误会给我们带来这种错误
<div id="#main"> <--- id with hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>

在页脚或页眉中执行此操作？将脚本移动到窗口就绪处理程序就绪处理程序是问题所在。vue不包括这个似乎很傻@ArunPJohny-如果您提交的答案中包含一个片段，我会将其标记为正确。为什么Vue文档中不包含此内容？我也遇到过同样的问题，但这很有效。嘿，谢谢，很抱歉在这里发表评论，为什么需要加载vue js，在文档中没有说明，谢谢注意，addEventListener
方法是“技术上”的一种更易于维护的方法，因为它不会覆盖全局窗口。onload
属性。导致此错误的原因是在
部分包含Webpack捆绑包脚本。等待加载窗口正在工作。控制台中没有警告，在加载DOM之前正在对包含DOM元素引用的脚本语句进行求值？这怎么可能是一个难以实施的警告呢？天哪，我真蠢！在身体末端之前，而不是在头部？这到底是什么意思？将您的vue.js代码放在之前，浏览器将首先加载正文内容，然后加载vue.js代码，这将正常工作。在使用Laravel及其附带的Laravel mix时遇到此问题。在主体解析后将js的加载移动到。使用“延迟”是否有任何副作用？您可以阅读有关脚本标记的defer
属性如何工作的更多信息。它将延迟运行JS代码，直到DOM解析之后，但在触发窗口onload事件之前。
var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
});

<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>