Search⌘ K
Home
Courses
Hands-on Vue.js: Build a fully functional SPA

Directives

Explore the concept of Vue.js directives and how they control DOM elements through data binding. Understand the use of directive arguments, filters for text formatting, and how to create custom directives to enhance application behavior and appearance.

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:

Javascript (babel-node)
<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. The v- prefix is followed by the directiveId ...