錯誤：vue.js:634 [Vue warn]: Cannot find element: #app
源碼：main.js
const app = new Vue({ el:'#app', data:{ books:[ { id:1, name:'《算法導論》', date:'2020-6', price:85, count:1 }, { id:2, name:'《UNIX編程藝術》', date:'2020-2', price:59, count:1 }, { id:3, name:'《編程珠璣》', date:'2008-10', price:39, count:1 }, { id:4, name:'《代碼大全》', date:'2020-6', price:128, count:1 }, ] } })
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="app"> <table> <thead> <tr> <th></th> <th>書籍名稱</th> <th>出版日期</th> <th>價格</th> <th>購買數量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in books"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{item.price}}</td> <td> <button>-</button> {{item.count}} <button>+</button> </td> <td><button>移除</button></td> </tr> </tbody> </table> </div> <script src="../js/vue.js"></script> <script src="main.js"></script> </body> </html>
style.css
table{ : 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left; } th{ background-color: #f7f7f7; color: #5c6b77; font-weight: 600; }
錯誤的原因是：剛開始，我引入的js在div的前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th></th>
<th>書籍名稱</th>
<th>出版日期</th>
<th>價格</th>
<th>購買數量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price}}</td>
<td>
<button>-</button>
{{item.count}}
<button>+</button>
</td>
<td><button>移除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
將
<script src="../js/vue.js"></script> <script src="main.js"></script>
這兩個文件引入放到后面就好了