Vuejs你好世界不会渲染

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"之后错过了一个逗号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你好世界不会渲染

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-03-13 18:09:54

解决方案2
1 2017-03-13 18:17:18

Vuejs你好世界不会渲染

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-03-13 18:09:54

解决方案2 1 2017-03-13 18:17:18

解决方案1
2 已采纳 2017-03-13 18:09:54

解决方案2
1 2017-03-13 18:17:18