Vue.js Custom Directives

Vue.js directives are used in Vue.js applications to make them reusable and straightforward. Directives are just like instructions that can be used in Vue.js applications to do things in a specific way. We have already used simple conditional directives such as v-if, v-show, v-else, v-for, v-bind, v-model, v-on, etc. in our https://www.tutorialsinfo.com/vue-js-conditions-and-loops page.

Here, we will learn how to create custom and global directives and use them just like we did in Vue. js components https://www.tutorialsinfo.com/vue-js-component because Vue.js allows us to create our own custom directives.

Syntax:

To create a custom directive, we have to use Vue.directive and the name of the directive, as shown in the above syntax. Let us see an example to demonstrate how to create a custom directive and how to use it.

Index.html file:

Index.js file:

Let's use a simple CSS file to make the output more attractive.

Index.css file:

After the execution of the program, you will see the following output:

Output:

Example Explanation

In the above example, you can see that we have created a custom directive named "changestyle" as following:

Now, the custom directive "changestyle" is assigned to a div as follows:

How to pass a value to the custom directive?

We can pass values to the custom directive by binding values to them. Binding is like arguments passed to the custom directive.

Syntax:

Let's take an example to demonstrate how to pass a value to the custom directive.

Index.html:

Index.js:

After the execution of the program, you will see the following output:

Output:

You can see that the value is passed in the directive and the color of the text is changed to green. The value is passed by using the following code:

It is accessed by using the following code:

Using Filters with Custom Directives

Vue.js supports filters that can be used in text formatting. The filters are generally used along with v-bind and interpolations ({{}}). We require using a pipe symbol at the end of JavaScript expression for filters.

Let's see an example to demonstrate the use of filters in the custom directive.

Index.html file:

Index.js file:

After the execution of the program, you will see the following output:

Output:

When you type any text in the above box, you can get the letter count as follows:

Example Explanation

In the above example, you can see that we have created a simple filter named "countletters". The countletters filter counts the numbers of characters entered in the textbox. We have to use the filter property and define the used filter as follows:

Here, we have defined the method countletters and then returned the length of the entered string.

Now, we have used the pipe operator and the name of the filter "countletters" to display the filter's result in output: