VueJS directives list

 

The directive is the instruction for vuejs to do things with Html pages like text, attribute, styles, events, looping, and condition for rendering Html content in web pages.

Here we are writing the list of some basic vuejs directives list and their usage examples.

• v-text
• v-html
• v-show
• v-if
• v-else
• v-else-if
• v-for
• v-on
• v-bind
• v-model
• v-slot
• v-pre
• v-cloak
• v-memo

Here we have presented some examples to understand how they are working with Html and vuejs, the below example is understanding the only usage of variables, here not define the all structure of vuejs code just Html part with vuejs variable use in directives.

1. v-text

This directive is used to print text in Html tag, it's the print text as it is just like it in the variable have Html code it prints the code, not Html view.

<!-- here we are message use as vuejs variable. -->
<p v-text="message"></p>
<!-- same as -->
<p>{{message}}</p>

2. v-html

This directive is used to print the Html code view in the Html web page. Just like in variable has Html code of image tag and inside any div tag to view the image.

<!-- here we are message use as vuejs variable. -->
<!-- in message variable store "<img src='[image path]' width='200' height='200' />" -->
<div v-html="message"></div>

3. v-show

This directive accepts the boolean value which means if you perform to show hide the Html tags and its child then you can use the condition inside directive or use the variable to with boolean values.

<!-- here we are message use as vuejs variable. -->
<!-- if variable have true then render first element otherwise  -->
<div v-show="message">show when true and false then hide</div>
<div v-show="message == false">show when false and true then hide</div>

4. v-if, v-else and v-else-if

These are all conditional directives that mean if I want to use conditions-based Html view render then use v-if and v-else parts, but you have multiple conditions then you can use v-if first then v-else-if after the default render used by the v-else directive. All these directives are used in the Html tag which is considered as the block of if or else or else-if.

<!-- use v-if use message variable -->
<div>
	<p v-if="message==1">1 Completed</p>
	<p v-if="message==2">2 Completed</p>
</div>

In the above code if message == 1 then render first p tag and if message =2 then render second p tag

<!-- use v-if and v-else use message variable -->
<div>
	<p v-if="message">Completed</p>
	<p v-else>Pending</p>
</div>

If you are using v-else you must use the v-if because v-else is the false condition of the v-if directive. The above example is based on true-false status print conditional tags.

<!-- use v-if, v-else-if and v-else use message variable -->
<div>
	<p v-if="message==1">Success</p>
	<p v-else-if="message==2">Review</p>
	<p v-else-if="message==2">Rejected</p>
	<p v-else>Pedning</p>
</div>

If you are using the v-else-if tag you must be use v-if and if have a default condition then you can use a v-else directive for the default render element. The above code is to print the multiple condition-based statuses of the activity like if the message has 1 then it prints completed, if a message has 2 then it prints Review like that.

5. v-for

This directive just like the name is used for the looping condition in Html tags uses the v-for attribute is to print that element in the render loop times, and it takes an array type of data in directives. Like if you are printing the array have the name of the string then use it like this.

<!-- if message has message = ['A', 'B', 'C', 'D', 'E'] -->
<p v-for="item in message" :key="item">{{item}}</p>

<!-- it is render like this -->
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>

In the above code use :key attribute to provide ordering of the attribute by the vuejs and it is required when looping the Html tag and it is used only in the same element of directives.

<!-- this is the another example of v-for directiv -->
<div v-for="(item, index) in items_array"></div>
<div v-for="(value, key) in items_object"></div>

These are some other examples of v-for directive that means if you want to array index then use the first line of code

and if you want to loop through the object then you can use the object key value loop.

6. v-on

This directive is used for the event hander of the Html tag, and it takes argument using append : (colon) and then event name, for example, v-on:click and the short name of this directive is @ and use like this @click

<button type="button" v-on:click="submit()"></button>

<!-- and short method use -->
<button type="button" @click="submit()"></button>

<!-- dynamic event -->
<button type="button" v-on:[event]="submit()"></button>
<button type="button" @:[event]="submit()"></button>

<!-- stop propagation -->
<button @click.stop="submit()"></button>

<!-- prevent default -->
<button @click.prevent="submit()"></button>

The above code Html button with click handler and perform logic to use submit function of vuejs.

7. v-bind

This property is used to make a dynamic property or attribute in the Html tag, also you can use it to make an attribute using the colon (:).

<img v-bind:src="image" />
<img :src="image" />

<!-- dynamic attribute -->
<img v-bind:[attribute]="variable" />
<img :[attribute]="variable" />

This directive uses multiple attributes as dynamic variables like class styles and child component props.

<!-- class binding -->
<div :class="{ red: isRed }">Red</div>
<div :class="[classA, classB]"> multiple classes</div>
<div :class="[classA, { classB: isB, classC: isC }]"> class and conditional classes</div>

<!-- style binding -->
<div :style="{ fontSize: size + 'px' }"> font size style dynamic</div>
<div :style="[styleObjectA, styleObjectB]">multiple style object dynamic</div>

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }">this element bind object key as attribute name and value is the attribute value</div>

<!-- prop binding. "prop" must be declared in my-component. -->
<my-component :prop="someThing"></my-component>

<!-- pass down parent props in common with a child component -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

8. v-model

This directive is used to bind the value of the variable with variable read/writes both ways perform, it has the feature of vuejs to provide two-way data binding. This attribute works only from elements like <input>, <select> and <textarea>.

<input v-model="message" placeholder="write here" />
<p>Message is: {{ message }}</p>

This code is performing the live change to show in p tag that is called two-way data binding.

9. v-slot

In vuejs v-slot directive use to pass data from outside and render in the child component, for example.

<!-- child component -->
<template>
	<div>
		list of element
		<slot />
		
		<!-- names slot -->
		<slot name="message_slot"></slot>
	</div>
</template>

<!-- parent component -->
<template>
	<div>
		child component
		<child-component>
			<ul>
				<li v-for="item in items" :key="item">{{item}}</li>
			</ul>
			<div slot="message_slot">{{message}}</div>
		</child-component>
	</div>
</template>

<script>
import ChildComponent from "./child_component";
# import child component

export default {
	components {
		ChildComponent
	},
	data() {
		return {
			items:['A', 'B', 'C', 'D'],
			message:'names slot printed'
		}
	}
}
</script>

the above code is defined in multiple ways to use slot attribute for child element and you can use.

10. v-pre

This directive is used to print strings without compilation, which means you can print code view style in the Html element.

<div v-pre>{{ this string will not compiled }}</div>

11. v-cloak

This directive is used to hide elements until an instance is ready or the page is fully loaded in the browser.

<div v-cloak>
  this will show after comilation is done
</div>

12. v-memo

This directive was introduced in the 3.2+ version of vuejs, it basically uses the javascript memoize function to store or cache the variables. It uses element and component both, if the variable value does not change in re-render then it will skip other wise re-render.

<div v-memo="[A, B]">
  <!-- html codes based on the A and B variable data -->
</div>

The above example has some basic directives of vuejs you can use to simplify your project and make it easy to re3nder the Html element.