Directives

Similar to Angular, we can add functionality to our templates by using directives. These are special properties we add to HTML tags starting with thev-prefix.

Say we have an array of data. We can render this data to the page as sequential HTML elements by using thev-for directive:

<p id="app">
  <h3>Grocery list</h3>
  <ul>
    <li v-for="grocery in groceries">{{ grocery }}</li>
  </ul>
</p>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      groceries: [ 'Bread', 'Milk' ]
    }
  });
</script>

The preceding code renders as follows:

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