CODEWITHSUNDEEP
javascriptvue.jsvuejs2
rustyocean
rustyocean

Reputation: 235

Vuejs Hello World Wont Render

I am trying to run the Vuejs hello world on a Cloud 9 dev environment. its so simple yet I cant figure why it isn't rendering, even though there are no errors. What am I doing wrong here ?

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

Upvotes: 0

Views: 472

Answers (2)

Hashemi Rafsan
Hashemi Rafsan

Reputation: 300

Actually, you didn't put your written file on the bottom and didn't give comma(,) between el and data that's why that script won't show the result. I hope now it's done.

<!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>

Upvotes: 1

Bert
Bert

Reputation: 82489

Your script should appear at the bottom of the body. If you include it in the head element, it will run before #app is rendered and nothing will happen.

Also, you missed a comma after el: "#app",

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

Upvotes: 2

Related Questions