CODEWITHSUNDEEP
vue.js
Bekzod Buriboev
Bekzod Buriboev

Reputation: 3

What am I doing wrong on Vue.js?

I'm new on vue.js but I can not understand why it still says {{ title }} instead Hello world!

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

I can not understand what is wrong but I'm just copying and pasting from tutorial

Upvotes: 0

Views: 63

Answers (2)

Cloud Soh Jun Fu
Cloud Soh Jun Fu

Reputation: 1512

# means id, you don't need to put id="#app", that's repetitive.

Besides that, you should load vue before you use new Vue. 

<html>
<head>
<title></title>
</head>
<body>
<div id="app">
   {{ title }}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script>
  new Vue({
    el:'#app',
    data() {
      return {
        title: "Hello World"
      }
    }
});
  </script>
</body>
</html>

Upvotes: 1

BTL
BTL

Reputation: 4666

You have to remove the # in <div id="#app">

Here is the full code : 

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

Upvotes: 3

Related Questions