A Vue component's template looks like HTML, but it can do much more. This module covers the template syntax: how to output data with interpolation and how directives, the special attributes that start with v-, tell Vue what to do with an element.
You will use v-if, v-else, and v-show to show and hide content, v-for to render a list from an array, and v-bind to set attributes and classes from your data.
Watch the lessons in order, then continue on to Reactivity & Data Binding.
The "Vue JS Directives" section of freeCodeCamp's Vue 3 course: an introduction to the v- attributes that control your template.
The Net Ninja shows how to output data in a template, react to click events, and show or hide content with v-if and v-show.
The Net Ninja continues with mouse events, outputting lists with v-for, and binding attributes with v-bind.
Brad Traversy renders a list of tasks from an array by looping over it with v-for.
Adding and removing CSS classes based on your data.
Showing and hiding a form with conditionals in the template.