Summary

This chapter exposed you to the first Vue directives and started to add some magic to your HTML.

In total, you learned how to accomplish three different use cases. First, we showed you how to apply HTML and text with v-text and v-html. This is very useful to bind dynamic variables to our component template. Then, we found out how to handle element visibility with v-if and v-show. We discovered that even if they both achieve the same result visually, they are actually different behind the scenes. v-show hides the element using CSS while v-if removes it from the DOM altogether. Finally, we finished the chapter with a look at v-for and how it can be used to iterate within a list and simplify our HTML.

Your turn

It is your turn to do some practice for this section. There are multiple places to practice directives, but these are some specific suggestions.

1. Refactor SocialPost.vue to use v-show to display a post’s tags. (You need to add a new property for this...