[Vue warn]: Cannot find element: #app1

最新推荐文章于 2023-10-18 16:36:06 发布

一只小小的濑名泉

最新推荐文章于 2023-10-18 16:36:06 发布

阅读量950

点赞数 1

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_25951747/article/details/115494005

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一次没有用脚手架，直接用script标签导入vue的时候出现的一个错误。

以下是错误案例（简化版）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>none</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="assets/js/libs/vue.js"></script>
		<script>
			new Vue({
				el: '#app1',
				data: {
					tests: [{
						num1: 'hello'
					}, {
						num1: 'hello2'
					}]
				}
			})
		</script>
	</head>
	<body>
		<div id="app1">
			<div v-for="test in tests">
				<div>{{test.num1}}</div>
			</div>
		</div>

		
	</body>
</html>

结果无法用v-for绑定上元素并报错——[Vue warn]: Cannot find element: #app1

其实是没弄清楚js文件在head标签还是body标签内的区别。
——放入html的head,是页面加载前就运行，放入body中，则加载后才运行javascript的代码
这里找不到元素app1是因为头部的js代码在页面还未加载前就运行，这个时候还没有加载元素Id,vue获取不到相应的元素

<div id="app1">
			<div v-for="test in tests">
				<div>{{test.num1}}</div>
			</div>
		</div>

修改后：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>none</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="assets/js/libs/vue.js"></script>
	</head>
	<body>
		<div id="app1">
			<div v-for="test in tests">
				<div>{{test.num1}}</div>
			</div>
		</div>

		<script>
			new Vue({
				el: '#app1',
				data: {
					tests: [{
						num1: 'hello'
					}, {
						num1: 'hello2'
					}]
				}
			})
		</script>
	</body>
</html>

一只小小的濑名泉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Vue warn]: Cannot find element: #app1

第一次没有用脚手架，直接用script标签导入vue的时候出现的一个错误。以下是错误案例（简化版）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>none</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <sc
复制链接

扫一扫