我的 Vue Hello World 示例显示双括号而不是呈现文本答案

【问题标题】：My Vue Hello World example shows double brackets and not rendered text我的 Vue Hello World 示例显示双括号而不是呈现文本
【发布时间】：2020-03-05 11:47:42
【问题描述】：

我正在尝试学习 Vue。我从 alligator.io 中的一个简单的 hello world 示例开始

<!DOCTYPE html>
<html lang="en">
  <meta>
    <meta charset="UTF-8">
    <title>Hello World in Vue.js</title>
  </meta>

  <body>

    <div id="hello-world-app">
      <h1>{{ msg }}</h1>
    </div>

    <script
      src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js">
    </script>

    <script>
      new Vue({
        el: "#hello-world-app",
        data() {
          return {
            msg: "Hello World!"
          }
        }
      });
    </script>

  </body>
</html>

我也尝试过使用官方 Vue 文档 Hello World 中的自己的文档来做这件事。结果是一样的。我的页面显示 {{ msg }} 而不是 Hello World。在控制台中，它读取 Vue 未定义。

演示：

new Vue({
  el: "#hello-world-app",
  data() {
    return {
      msg: "Hello World!"
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="hello-world-app">
  <h1>{{ msg }}</h1>
</div>

【问题讨论】：

在你的打开标签后你使用而不是，所以你的 html 是无效的
如果 Vue 没有定义...这是原因，因为它显示 {{ }} ...您是否正确导入了 vue 路径？
之前我只是在浏览器中查看本地文件。 Vue 不是这样加载的。当我使用 Apache 提供文件时，它确实有效。
似乎在 jsFiddle 和这里使用 sn-ps 都可以正常工作。代码已更新。

标签： javascript html vue.js

【解决方案1】：

你需要把 vue.min.js 的 url 改成 https，试试这个

<!DOCTYPE html>
<html lang="en">
  <meta>
    <meta charset="UTF-8">
    <title>Hello World in Vue.js</title>
  </meta>

  <body>

    <div id="hello-world-app">
      <h1>{{ msg }}</h1>
    </div>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js">
    </script>

    <script>
      new Vue({
        el: "#hello-world-app",
        data() {
          return {
            msg: "Hello World!"
          }
        }
      });
    </script>

【讨论】：

那行得通。我不知道为什么它在教程中是这样的，除了当文件由 Apache 提供时它确实有效。
@Charles Dake，你可以试试这个，它会为你工作，只是一个简单的 url 更改。
这个答案甚至没有解释这个问题。如果您接受“只需复制粘贴即可！”-答案至少考虑添加一些相关信息。
HTML 也不正确，因为有 <meta>-tags 而不是 <head> ...
@Num Lock，这个代码 sn-p 取自 alligator.io，问题是要确定为什么相同的 sn-p 打印 {{ msg }} 不是正确的值，它不是关于现有代码sn-p中的错误或正确之处，这就是为什么我没有给出完整的解释，只是强调了问题并修复了现有代码sn-p。

【解决方案2】：

问题在于您的 URL 快捷方式。您只需按照 cmets 中的说明在本地打开您的 html 文件。

替换

//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js

与

https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js

它会起作用的。还要将 <meta>...</meta> 替换为 <head>...</head>，以使您的 HTML 正确。

问题是 - 正如我已经说过的 - 您在本地打开文件，在这种情况下您的浏览器将假定 file: 而不是 https:。

当然file://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js 很可能不会领先。

我复制粘贴了您的示例，仅通过此更改，它按预期工作。通过检查浏览器的开发人员工具，您可以轻松发现该问题。

还可以查看this question 以获得相关答案。

【讨论】：