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

Question

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

Answer 1

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>