Rumah  >  Soal Jawab  >  teks badan

javascript - Mengapa komponen global vue dan kejadian vue tidak boleh dipisahkan ke dalam fail yang berbeza?

Fail

global.js:

var app;
app = new Vue({
    el: "#app",
    data: {
        value: "hello world",
    }
});

log masuk.js

Vue.component('login', {
   template: '<h1>login</h1>'
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Daemon</title>
    <script src="./js/jquery-3.2.1.js" charset="UTF-8"></script>
    <script src="./js/semantic.min.js" charset="UTF-8"></script>
    <script src="./js/vue.js" charset="UTF-8"></script>
    <link rel="stylesheet" href="./css/semantic.min.css">
</head>
<body>
    <p id="app">
        <p class="ui container">
            <p class="ui pider"></p>
            <p class="ui blue button">
                {{value}}
            </p>
            <login></login>
        </p>
    </p>
    <script src="./js/global.js" charset="UTF-8"></script>
    <script src="./js/login.js" charset="UTF-8"></script>
</body>
</html>

Hasilnya ialah ralat: [Vue warn]: Elemen tersuai tidak diketahui: <log masuk> - adakah anda mendaftarkan komponen dengan betul untuk komponen rekursif, pastikan anda memberikan pilihan "nama". )

Wira mana yang boleh memberi nasihat kepada Xiaobai?

typechotypecho2687 hari yang lalu1083

membalas semua(2)saya akan balas

  • 習慣沉默

    習慣沉默2017-07-05 10:44:57

    Saya membuat beberapa pengubahsuaian dalam HTML dan melaraskan susunan pengenalan js, kerana ia adalah perlu untuk memastikan bahawa komponen yang digunakan di dalamnya telah diisytiharkan dan didaftarkan apabila komponen akar apl dipaparkan.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Daemon</title>
        <script src="./js/jquery-3.2.1.js" charset="UTF-8"></script>
        <script src="./js/semantic.min.js" charset="UTF-8"></script>
        <script src="./js/vue.js" charset="UTF-8"></script>
        <link rel="stylesheet" href="./css/semantic.min.css">
    </head>
    <body>
        <p id="app">
            <p class="ui container">
                <p class="ui pider"></p>
                <p class="ui blue button">
                    {{value}}
                </p>
                <login></login>
            </p>
        </p>
          <script src="./js/login.js" charset="UTF-8"></script>
        <script src="./js/global.js" charset="UTF-8"></script>
    </body>
    </html>

    balas
    0
  • 漂亮男人

    漂亮男人2017-07-05 10:44:57

    Siri API Global mesti diisytiharkan sebelum instantiasi

    balas
    0
  • Batalbalas