Vue.js Directives

Facebooktwitterredditpinterestlinkedinmailby feather

Vue.js Directives

Vue directive is an instruction for Vue.js, which helps to do work in a certain way. Vue Directives are like HTML attributes that are included inside the Vue.js templates. All Vue directives are starts with v-, to indicate a special Vue attribute such as v-if, v-else, v-show, v-for, v-modal, v-bind, v-on, etc. We can use the following syntax to create a directive in a Vue.js application.

Syntax:

Example: This example explains how we can use the Vue directive in the application.

Index.Html

Main.js

Output: After executing the above code, we will get output, as shown below:

There are many types of Vue directives, such as filters, multiple clauses, literal directives, and empty directives.

Filters

Vue.js framework supports text formatting filters. It is used in combination with v-bind and interpolations ({{}}). Filters are denoted by a single pipe symbol ( | ) in JavaScript expressions.

Example: This example explains how we can use the filter property in the Vue.js directive.

Index.Html

Main.js

Output: After executing the above code, we will get output, as shown below;

In the above example, we have seen that there is a textbox. When we enter any words or sentences in the textbox, it will count the total number of characters, including with space bar.

Multiple Clause

In a single attribute, we can create multiple bindings of the same directive that are separated by commas. They are bound under the hood as multiple instances of the directive.

Example: The following example helps us to understand how we can use the multiple clauses in a single attribute of Vue.js components.

Literal Directives

Some of the Vue directives do not create the data bindings. They only take the attribute value as a literal string, like a v-ref directive.

Example:

Empty Directive

Some of the Vue directives don’t expect an attribute value. These Vue directives do something to the component only for once, like a v-pre directive.

Example: By this example, we can understand how we can use the empty directive in the Vue.js components.

Facebooktwitterredditpinterestlinkedinmailby feather