Question

我正在尝试在Cloud 9开发环境中运行Vuejs hello世界。它如此简单但我无法弄清楚它为什么不渲染，即使没有错误。我在这里做错了什么？

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://unpkg.com/vue@2.2.4"></script>
         <script type="text/javascript">
            new Vue({
                el: '#app'
                data: {
                    message: 'Hello World!'
                }
            });
        </script>
    </head>
    <body>
        <div id="app">{{ message }}</div>
     </body>   
</html>

Answer 1

您的脚本应显示在body的底部。如果您将其包含在head元素中，则会在 #app呈现之前运行，但不会发生任何事情。

另外，您错过了el: "#app"之后的逗号，

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://unpkg.com/vue@2.2.4"></script> </head> <body> <div id="app">{{ message }}</div> <script type="text/javascript"> new Vue({ el: '#app', data: { message: 'Hello World!' } }); </script> </body>

Answer 2

实际上，您没有将您的书面文件放在底部，并且没有在el和数据之间给出逗号（，），这就是为什么该脚本不会显示结果的原因。我希望现在已经完成了。

<!DOCTYPE html>
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>  
    </head>
    <body>
        <div id="app">{{ message }}</div>
     </body>   
    <script type="text/javascript">
      new Vue({
        el: '#app',
        data: {
          message: 'Hello World!'
           }
       });
    </script>
</html>

Vuejs Hello World Wont Render

2 个答案: