Components

Components extend basic HTML elements and allow you to create your own reusable custom elements.

For example, here I've created a custom element,grocery-item,which renders as ali. The text child of that node is sourced from a custom HTML property,title,which is accessible from within the component code:

<p id="app">
  <h3>Grocery list</h3>
  <ul>
    <grocery-item title="Bread"></grocery-item>
    <grocery-item title="Milk"></grocery-item>
  </ul>
</p>
<script>
  Vue.component( 'grocery-item', { 
    props: [ 'title' ],
    template: '<li>{{ title }}</li>'
  });

  new Vue({
    el: '#app'
  });
</script>

This renders as follows:

<p id="app">
  <h3>Grocery list</h3>
  <ul>
    <li>Bread</li>
    <li>Milk</li>
  </ul>
</p>

But probably the main reason to use components is that it makes it easier to architect a larger application. Functionality can be broken into reuseable, self-contained components.