VueJs directives introduction

This entry is part 3 of 7 in the series VueJs

This post is an introduction to directives in Vuejs. We have a later post on creating custom directives in VueJs, which will go into further detail on creating and using them.

So directives are a way of providing a mechanism for mapping data changes to arbitrary DOM behavior. This could vary anything from simple if statements to looping through data to binding on events or model data. VueJs comes with core directives that make up a lot of the functionality in Vue. These core directives will, for most projects, keep you covered for whatever you are trying to achieve. It is the more complex projects that you might find yourself needing to then create your own. Well let us look at the syntax, we will start off with the v-show directive:

<div v-if="1 === 1">show Me</div>

This directive will simple show you the div with the text within it. This can be used in conjunction with the v-else directive:

<div v-if="1 === 1">show Me?</div>
<div v-else>or show Me?</div>

One or the other will be shown. So here is a list of core directives shipped with Vue:

  • v-text
  • v-html
  • v-if
  • v-show
  • v-else
  • v-for
  • v-on
  • v-bind
  • v-model
  • v-ref
  • v-el
  • v-pre
  • v-cloak

A good refernece is the VueJs documentation on directives

So this lesson serves as more of a more reading article but again it will help build up to the more complex aspects of Vue.

Thanks for reading

Series Navigation<< VueJs class and style bindingsVueJs method and event handling >>

Random Posts