dop*_*man 141 javascript mvvm vue.js
我正在使用Vuejs.这是我的标记:
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
这是我的代码:
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
})
;
Run Code Online (Sandbox Code Playgroud)
当我加载页面时,我收到此警告:
[Vue warn]: Cannot find element: #main
Run Code Online (Sandbox Code Playgroud)
我究竟做错了什么?
Aru*_*hny 285
我认为问题是你的脚本在目标dom元素加载到dom之前执行...一个原因可能是你已经将脚本放在页面的头部或放在div元素之前的脚本标记中#main.因此,当脚本执行时,它将无法找到目标元素,从而导致错误.
一种解决方案是将脚本放在load事件处理程序中
window.onload = function () {
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
}
Run Code Online (Sandbox Code Playgroud)
另一种语法
window.addEventListener('load', function () {
//your script
})
Run Code Online (Sandbox Code Playgroud)
li *_*hao 45
我犯了同样的错误.解决方案是将脚本代码放在正文结尾之前,而不是在head部分.
Tad*_*nis 20
简单的做法是将脚本放在文档下方,就在结束</body>标记之前:
<body>
<div id="main">
<div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>
<script src="app.js"></script>
</body>
Run Code Online (Sandbox Code Playgroud)
app.js文件:
var main = new Vue({
el: '#main',
data: {
currentActivity: 'home'
}
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
96733 次 |
| 最近记录: |