What are Vue directives

If you have been using Vue for some time you must have seen them in your Vue template code; special keywords in your HTML starting with v-. These special HTML attributes are called Vue directives and they allow you to modify how Vue renders your template.

HTML attributes just are some special modifiers for your HTML tags, in the <img> tag for example you can set the source of the image by specifying a value to the src attribute. Resulting in something like: <img src="logo.png">.

Take for example the v-if directive, this directive requires an argument that will be evaluated as true or false. If the expression that is passed evaluates to true then Vue renders that part of your template. If the expression evaluates as false then Vue will make sure that that part won't show up on your webpage.

The directives that are built-in to Vue are shown at this page of the Vue documentation.

They built-in directives are:

• v-text
• v-html
• v-show
• v-if / v-else-if / v-else
• v-for
• v-on (with shorthand @)
• v-bind (with shorthand :)
• v-model
• v-slot
• v-pre
• v-once
• v-memo
• v-cloak

Besides the directives that are built-in to Vue, some Vue plugins may provide their own directives as well.

You can create your own custom directives too, this allows you to reuse some logic that is written around DOM actions. Such as setting some CSS classes or focusing on an input field.