帕格（翡翠）基本HTML頁面：找不到元素：#app

Question

我使用震動式服務器。 它使用Pug預處理程序（以前稱為Jade）。 這是我的頁面代碼：

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")向下移動有幫助。 但是還有更好的變體嗎？ 還是可以嗎？

Answer 1

確實有兩種處理方法。 一種是將腳本移到頁面底部，第二種是使用事件在頁面加載時觸發代碼。

通常，這些天（沒有jQuery）偵聽要加載的頁面的方式是偵聽DOMContentLoaded事件。

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

DOMContentLoaded和load事件之間的主要區別在於，當解析所有DOM內容時，將觸發DOMContentLoaded ，並且load事件等待所有內容 （包括圖像，樣式表等）被加載。

帕格（翡翠）基本HTML頁面：找不到元素：#app

問題描述

1 個解決方案

解決方案1
0 已采納 2017-07-24 15:25:37

帕格（翡翠）基本HTML頁面：找不到元素：#app

問題描述

1 個解決方案

解決方案1 0 已采納 2017-07-24 15:25:37

解決方案1
0 已采納 2017-07-24 15:25:37