In this chapter we are going through some basic examples of Vue's directives. Well, if you have not used any framework like Vue.js or AngularJS before, you probably don't know what a directive is. Essentially, a directive is some special token in the markup that tells the library to do something to a DOM element. In Vue.js, the concept of directive is drastically simpler than that in Angular. Some of the directives are:
v-show
which is used to conditionally display an elementv-if
which can be used instead ofv-show
v-else
which displays an element whenv-if
orv-show
evaluates to false
Also, there is v-for
, which requires a special syntax and its use is for rendering (for example, render a list of items based on an array). We will elaborate about the use of each later in this book.
Let us begin and take a look at the directives we mentioned.