Question

我有一个从本地机器加载 Vue JS 2 的电子应用程序，但是，无论我附加 el 的任何元素都完全清空元素并用 Vue JS 注释替换内容，我是什么？不见了？

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/bulma0.9.2.min.css">
    <link rel="stylesheet" href="./assets/css/tv.css">
  </head>
  <body style="background: white;">
    <div id="app>
      {{ message }}
    </div>
    <script src="./assets/js/vue2.6.12.min.js"></script>
    <script src="./assets/js/tv.js"></script>
  </body>
</html>

tv.js

new Vue({
  el: '#tv',
  data: {
    message: 'Hello Vue!'
  }
})

这什么都不渲染，我怎样才能让 Vue JS 渲染？

Answer 1

我认为您的代码有错别字，您的意思是改用 #app 吗？

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

Answer 2

正如 Zac 已经说过的，您的代码中有一个错字。此外，第 12 行 (<div id="app">) 处还缺少一个引号。我觉得你有两种可能。要么将 id 更改为 tv，例如：

<div id="tv">...</div>

或者，根据 Zac 的回答，将 tv.js 更改为：

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

Vue JS 不会在 Electron 应用程序内部呈现

2 个答案: