简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Mengapa komponen global vue dan kejadian vue tidak boleh dipisahkan ke dalam fail yang berbeza?
typecho
typecho 2017-07-05 10:42:57
0
2
1036
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?

typecho
typecho

Following the voice in heart.

membalas semua(2)
習慣沉默
習慣沉默2017-07-05 10:44:57 Tingkat 2

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>
Suka +0
Tambah Balasan
漂亮男人
漂亮男人2017-07-05 10:44:57 Tingkat 1

Siri API Global mesti diisytiharkan sebelum instantiasi

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！