vue.js:634 [Vue warn]: Cannot find element: #app - 吹风哪页就哪页

vue.js:634 [Vue warn]: Cannot find element: #app

错误：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>

这两个文件引入放到后面就好了

posted on 2020-12-29 15:22 吹风哪页就哪页阅读(1499) 评论(0) 收藏举报

刷新页面返回顶部