Why doesn't my component template show up in Vue?

user_13457825 0
Viewed 147

I've just started learning Vue. Now I'm trying to build my first component, but the template didn't show up, and the console didn't give me any error. Here's some of my code:

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

and here's a Jsbin with my full code

vuejs2 vue-component vue.js html javascript
1 Answers

Your Vue instance needs a mounting id specified in the el property:

var vm = new Vue({ 
  el: '#app',  // Specifying a DOM id "app"
  data() {
    // ...
  }
})

And the app template needs to be wrapped with that same id:

<div id="app">
  <button-counter></button-counter>
</div>

Demo:

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

var vm = new Vue({ 
  el: '#app',
  data() {
    return {
      name:'yazid',
      age:'20',
      date:'press to known the date',
      skills:['HTML','CSS','JS'],
      ele:'<h1> elements from vue js</h1>',
      completed_languages:[{
        lang:'html',
        percent:'90%'
      },{
        lang:'CSS',
        percent:'70%'
      },{
        lang:'JS',
        percent:'70%'
      }]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button-counter></button-counter>
</div>

user_21850930
Related