Template Syntax: Directives

Directives

To build any sort of interesting UI, we need to do more than just display simple values. Vue’s template syntax includes directives for looping and conditional display logic, as well as binding HTML attributes to reactive data properties. Directives are attributes we add to DOM elements and components very similar to AngularJS’s ng-* directivesAngularJS's ng-* directives stands for "Angular JavaScript Directives," which are HTML attributes used to extend and enhance the behavior of HTML elements within AngularJS applications..

The v-for directive

Thinking back to our example instance dataIn Vue.js, instance data refers to the data properties defined within a Vue component. These properties hold the state or information that the component uses to render and manage its behavior., we’ve probably already thought about how we go about looping over collections of data such as arrays.

The v-for directive allows us to tell Vue that we want a section of our template to be rendered for every item in a collection (which can be an array or an object).

Syntax