Javascript 我的Vue Hello World示例显示双括号，而不是渲染文本_Javascript_Html_Vue.js

Javascript 我的Vue Hello World示例显示双括号，而不是渲染文本

javascript html vue.js

Javascript 我的Vue Hello World示例显示双括号，而不是渲染文本,javascript,html,vue.js,Javascript,Html,Vue.js,我正在努力学习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-wo

我正在努力学习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>


{{msg}}

您需要将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>


Vue.js中的Hello World
{{msg}}
新Vue({
el:#你好世界应用程序“，
数据（）{
返回{
味精：“你好，世界！”
}
}
});

您需要将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>


Vue.js中的Hello World
{{msg}}
新Vue({
el:#你好世界应用程序“，
数据（）{
返回{
味精：“你好，世界！”
}
}
});

问题在于您的URL快捷方式。您只需按照注释中的说明在本地打开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

它会起作用的。另外，将

..

替换为

..

，只是为了使HTML正确

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

文件：

，而不是

https:

当然

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

很可能不会在任何地方领先

我复制粘贴了您的示例，仅此更改使其按预期工作。通过检查浏览器的开发人员工具，您可以很容易地发现这个问题

另外，请查看相关答案。

问题在于您的URL快捷方式。您只需按照注释中的说明在本地打开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

它会起作用的。另外，将

..

替换为

..

，只是为了使HTML正确

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

文件：

，而不是

https:

当然

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

很可能不会在任何地方领先

我复制粘贴了您的示例，仅此更改使其按预期工作。通过检查浏览器的开发人员工具，您可以很容易地发现这个问题

另外，请查看相关答案。

在打开标记后，您使用了而不是，因此您的html无效，如果未定义Vue。。。这是因为它显示了{{}}。。。您是否正确导入了vue路径？在我将其作为本地文件在浏览器中查看之前。Vue没有那样加载。当我使用Apache为文件提供服务时，它确实可以工作。在JSFIDLE中似乎可以很好地工作，在这里也可以使用代码片段。代码已更新。在打开标记后，您使用而不是，因此如果未定义Vue，则html无效。。。这是因为它显示了{{}}。。。您是否正确导入了vue路径？在我将其作为本地文件在浏览器中查看之前。Vue没有那样加载。当我使用Apache为文件提供服务时，它确实可以工作。在JSFIDLE中似乎可以很好地工作，在这里也可以使用代码片段。代码更新了，成功了。我不知道为什么教程中会出现这种情况，除了当文件由Apache提供时，它确实有效。@Charles Dake，你可以试试这个，它对你有效，只是一个简单的url更改。这个答案甚至没有解释这个问题。如果你接受“只是复制粘贴，它将工作！”-答案至少考虑添加一些相关信息。HTML也不正确，因为有“代码> <代码>标签，而不是代码> <代码>…@ num锁，这个代码片段是从Aligigal.IO中获取的，问题是找出为什么相同的片段是打印{{MSG}}。不是正确的值，不是关于现有代码段中的错误或正确，这就是为什么我没有给出完整的解释，只是强调了问题并修复了现有代码段。这很有效。我不知道为什么教程中会出现这种情况，除了当文件由Apache提供时，它确实有效。@Charles Dake，你可以试试这个，它对你有效，只是一个简单的url更改。这个答案甚至没有解释这个问题。如果你接受“只是复制粘贴，它将工作！”-答案至少考虑添加一些相关信息。HTML也不正确，因为有“代码> <代码>标签，而不是代码> <代码>…@ num锁，这个代码片段是从Aligigal.IO中获取的，问题是找出为什么相同的片段是打印{{MSG}}。不是正确的值，这与现有代码段中的错误或正确无关，这就是为什么我没有给出完整的解释，只是强调了问题并修复了现有代码段。