zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    Alwayson常用脚本
    SQL Server 编译缓存相关的知识点
    Alwayson 常用视图
    Analysis Services PowerShell
    visible:hidden和dispaly:none的区别
    问题:做EsayUI分页报错 $(...).pagination is not a function之后我把<jsp:include page="top.jsp"/>去掉就好了,有大神知道为什么吗?另外分页按键放在那里好些,我放到form表单下,就开始显示,点一下后就没有了
    MyBatis:统计数量(查询所有)
    attr与prop的区别
    JAVA_OPTS
    JVM参数设置
  • 原文地址:https://www.cnblogs.com/liqinzhen/p/14206777.html
Copyright © 2011-2022 走看看