Pug (Jade) Basis HTML Seite: Kann Element nicht finden: #app

Ich benutze Vibed Server. Es benutzt Pug Preprocessor (vorher bekannt als Jade). Hier ist meine Seite Code:Pug (Jade) Basis HTML Seite: Kann Element nicht finden: #app

doctype html 
html 
    head 
     script(src="https://unpkg.com/vue") 
     script(src="app.js") 
     title Hello, World 
    body 
     h1 Hello World 
     #app 
      |{{message}}

Es erzeugt nächste HTML-Ausgabe:

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://unpkg.com/vue"></script><script src="app.js"></script><title>Hello, World</title> 
    </head> 
    <body> 
     <h1>Hello World</h1> 
     <div id="app"> 
      {{message}} 
     </div> 
    </body> 
</html>

Mein app.js Code:

window.onload = function() { 

    var app = new Vue({ 
     el: '#app', 
     data: { 
     message: 'Hello Vue!' 
     } 
    }); 

    app.$mount('#app'); 

}

Aber es ist nicht funktionieren. In der Browser-Konsole bekomme ich nächsten Fehler: Cannot find element: #app

upd: Verschieben script(src="app.js") nach unten half. Aber gibt es eine bessere Variante? Oder es ist in Ordnung?

Quelle

2017-07-24 Dmitry Bubnenkov

Es gibt wirklich zwei Möglichkeiten, damit umzugehen. Eine davon ist, das Skript an den unteren Rand der Seite zu verschieben, und die zweite besteht darin, einen Code auszulösen, wenn die Seite geladen wird.

Die Art, wie Sie normalerweise auf die Seite warten, die in diesen Tagen geladen werden soll (ohne jQuery), ist auf das Ereignis DOMContentLoaded zu hören.

document.addEventListener("DOMContentLoaded", function() { 
    var app = new Vue(...) 
});

Der Hauptunterschied zwischen den DOMContentLoaded und dem load Ereignisse ist, dass DOMContentLoaded ausgelöst wird, wenn alle DOM-Gehalt analysiert wurde, und das load Ereignis wartet alles bis einschließlich Bilder geladen zu werden, und Stylesheets und andere Dinge.

Quelle

2017-07-24 15:25:37 Bert

Pug (Jade) Basis HTML Seite: Kann Element nicht finden: #app

Antwort

Verwandte Themen