Vue.js is a powerful JavaScript framework that offers a templating language that is a superset of HTML. In addition to interpolation, Vue.js provides a feature called directives that allows you to add special behavior to your HTML attributes. In this article, we will explore the various Vue directives and learn how to use them effectively in your Vue.js applications.
v-text
: Simplify Text Interpolation
Instead of using interpolation, Vue.js provides the v-text
directive to simplify the display of text data. By using the v-text
directive, you can achieve the same result as interpolation:
<span v-text="name"></span>
v-once
: Render Data Once
In Vue.js, data values are reactive, meaning they automatically update when the underlying data changes. However, if you want to render a value only once and prevent it from updating, you can use the v-once
directive:
<span v-once>{{ name }}</span>
v-html
: Render HTML Safely
By default, when you use interpolation to display a data property, Vue.js escapes the HTML to protect against cross-site scripting (XSS) attacks. However, in certain cases, you may want to render HTML dynamically. In such cases, you can use the v-html
directive:
<span v-html="someHtml"></span>
v-bind
: Bind Attributes and Properties
While interpolation works well for displaying data in the tag content, it cannot be used for setting attributes or properties. For that, you need to use the v-bind
directive. Here’s an example:
<a v-bind:href="url">{{ linkText }}</a>
The v-bind
directive is so commonly used that Vue.js provides a shorthand syntax using the colon (:
):
<a :href="url">{{ linkText }}</a>
Two-Way Binding using v-model
The v-model
directive is used for two-way data binding, allowing you to bind a form input element to a data property in Vue.js. Here’s an example of binding an input field and a select dropdown:
<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>
<select v-model="selected">
<option disabled value="">Choose a fruit</option>
<option>Apple</option>
<option>Banana</option>
<option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>
Using Expressions
Vue directives support JavaScript expressions. This means you can use any valid JavaScript expression in a directive. For example:
<span v-text="'Hi, ' + name + '!'"></span>
<a v-bind:href="'https://' + domain + path">{{ linkText }}</a>
Conditionals
Vue directives can also be used for conditionals in your templates. You can use the ternary operator in a directive to perform a conditional check. Here’s an example:
<span v-text="name === 'Flavio' ? 'Hi Flavio!' : 'Hi ' + name + '!'"></span>
Vue.js also provides dedicated directives for performing more organized conditionals, such as v-if
, v-else
, and v-else-if
. Here’s an example of using v-if
:
<p v-if="shouldShowThis">Hey!</p>
Loops
To render a list of items, you can use the v-for
directive in Vue.js. You can iterate over an array of values or an array of objects. Here are examples of both scenarios:
<template>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: ['car', 'bike', 'dog']
};
}
}
</script>
<template>
<div>
<ul>
<li v-for="todo in todos">{{ todo.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
todos: [
{ id: 1, title: 'Do something' },
{ id: 2, title: 'Do something else' }
]
};
}
}
</script>
You can also retrieve the index of each item using the syntax (item, index) in items
.
Events
Vue.js provides the v-on
directive to handle DOM events and trigger methods in response. Here’s an example of using v-on
to handle a click event:
<template>
<a v-on:click="handleClick">Click me!</a>
</template>
<script>
export default {
methods: {
handleClick() {
alert('test');
}
}
}
</script>
You can also pass parameters to the event handler like this:
<template>
<a v-on:click="handleClick('test')">Click me!</a>
</template>
<script>
export default {
methods: {
handleClick(value) {
alert(value);
}
}
}
</script>
Additionally, you can use inline JavaScript expressions directly in your template:
<template>
<a v-on:click="counter = counter + 1">{{ counter }}</a>
</template>
<script>
export default {
data() {
return {
counter: 0
};
}
}
</script>
v-on
is commonly used, so Vue.js provides a shorthand syntax using the @
symbol:
<a v-on:click="handleClick">Click me!</a>
<a @click="handleClick">Click me!</a>
Show or Hide Elements
If you only want to show an element in the DOM when a particular property evaluates to true
, you can use the v-show
directive. It will render the element with the style display: none
if the condition is not met:
<p v-show="isTrue">Something</p>
Event Directive Modifiers
Vue.js offers various event modifiers that can be used with the v-on
directive to automatically modify the behavior of the event. One example is the .prevent
modifier, which automatically calls the preventDefault()
method on the event. Here’s an example of preventing the default form submission:
<form v-on:submit.prevent="formSubmitted"></form>
Vue.js provides other modifiers like .stop
, .capture
, .self
, .once
, and .passive
. You can learn more about them in the official documentation.
Custom Directives
While Vue.js comes with a set of default directives that cover most use cases, you can also create your own custom directives if needed. If you’re interested in creating custom directives, you can learn more in the official Vue.js documentation.
Tags: Vue.js, Vue.js Directives, v-text, v-once, v-html, v-bind, v-model, v-if, v-for, v-on, v-show, event directives, custom directives