Understanding of VueJS directives

Directives is helping to quick & easy changes for HTML attribuite behaviour. If you compare vueJS is pizza , then VueJS directive is souces. In this tutorial we will see some example code of VueJs directives.

Rathik
Rathik   Follow

According to our VueJs syllabus we have already known with Vuejs Instance. Also, we know how to embed data inside HTML elements. That's is an interpolation. .Directives start with v- & similar to HTML attributes which are added into Templates.

Let's Jump into these with more details. Here I will give only VueJS code snippet. There are 15+/- directives in VueJS. But you can make & own custom directives, we will learn that later.

# Use of v-text

We have used by interpolation like this

<span></span>

But you can also use it by v-text directives.

<span v-text="name"></span>

Note: This is one-way Data Binding

# Use of v-once

Suppose, you are want to keep your name fixed once it set. But you can do that easily with v-once

<span v-once></span>

# Use of v-html

You can pass HTML code via these directives. It's very nice to hear that Vue has XSS attacks protection automatically for this.

<span v-html=" '<h1>This is heading from v-html</h1>' "></span>

# Use of v-model

As we know that vue-js is Reactive as well, here you will get it better understand by run this example.

<input v-model="message" placeholder="Enter a message">
<p>Message is: </p>

When you are inputting anything at the input box, the HTML paragraph body will be updated automatically.
Note: This is two-way Data Binding

# Using Expressions via Directives are very easy

<span v-text="'Hi, ' + Rathik + '!'"></span>

Hope now you understand about directives, what directives is & how it works.

Feel free to ask any questions in the comment box below.