Pug（Jade）base HTML頁面：找不到元素：#app

我使用了vibed服務器。它使用Pug預處理器（之前稱爲Jade）。這裏是我的網頁代碼：Pug（Jade）base HTML頁面：找不到元素：#app

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

它產生下一個HTML輸出：

<!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>

我app.js代碼：

window.onload = function() { 

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

    app.$mount('#app'); 

}

但它不工作。在瀏覽器控制檯中，我收到下一個錯誤： Cannot find element: #app

upd：將script(src="app.js")移動到向下幫助。但是有沒有更好的變種？或者沒關係？

來源

2017-07-24 Dmitry Bubnenkov

真的有兩種方法來處理它。一種是將腳本移動到頁面底部，另一種是在加載頁面時使用事件觸發代碼。

你通常監聽頁面的方式，這些天（沒有jQuery）是聽取DOMContentLoaded事件。

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

的DOMContentLoaded和load事件是，當所有的DOM內容已經被解析DOMContentLoaded火災，和load事件之間的主要差別等待一切要加載包括圖像，和樣式表，和其它的東西。

來源

2017-07-24 15:25:37 Bert

Pug（Jade）base HTML頁面：找不到元素：#app

回答

相關問題