Hands-on Vue.js: Build a fully functional SPA/

...

/

Directives

Directives

Learn about Vue.js directives and template syntax.

We'll cover the following...

A directive is a special token that tells Vue what to do with a certain DOM element. In Vue.js, directives are in the form of HTML attributes that are prefixed to an HTML element. The purpose of a directive is to bind the HTML element to the Vue instance assets which lets Vue change that element in the DOM in case the assets on which that element depends upon are updated. These assets include data, methods, and other elements in the Vue instance. The general directive syntax is shown below:

Press + to interact
<element
  prefix-directiveId="[argument:] expression [| filters...]">
</element>

We will explain everything in line 2 of the above code in this lesson which includes the prefix, directiveId, arguments, expressions, and filters.

The v- prefix

All Vue directives are special attributes that are prefixed with a v-. These attributes are expected to be a single JavaScript expression ...