Vue data interpolation and directives are core features that make the framework distinctive. The interpolation and directive properties make Vue easier and simpler to write.
If you are familiar with the JavaScript ecosystem, then you must have heard of Vue. If not, read on to learn about it.
In this article, we will dive into VueJS and then go ahead and explain its interpolation and directive properties with illustrations.
What is VueJS
Vue is an open-source JavaScript framework that makes building interactive and reactive web frontends easier. It is used to build web applications that run in the browser, the part the user gets to interact with.
Vue takes a declarative approach to programming and can be used in two different ways. It can be used to build parts of HTML pages or the entire front end of a web application. It can also be integrated into big front-end projects.
The Vue documentation provides information on how to easily install and get it running to begin building interactive web applications.
Vue syntax
Vue uses an HTML-based template syntax where developers specify how the component should render and behave in a declarative manner. It does this by binding the Document Object Model (DOM) to the corresponding component instance data. Vue automatically keeps the DOM up-to-date whenever the data gets changed.
Vue comes in a template tag that serves as the body of the Vue-controlled HTML and is the part that gets rendered to the browser. The logic that controls the HTML is written in the script tag.
<template>
<div id="app">
<header>
<h1>Vue Tutorial</h1>
</header>
<button v-on:click="count++">Add 10</button>
<p>Result: {{ counter }}</p>
</template>
import { createApp } from 'vue'
createApp({
data() {
return {
counter: 0
}
}
}).mount('#app')
An illustration of Vue.
This illustration portrays how Vue works.
The template syntax allows you to declaratively output the HTML content based on the JavaScript state. This template syntax feature is made available through Vue.
When a change is made to the JavaScript state, it automatically updates the DOM.
Interpolation and directives
The interpolation property in Vue entails the mustache syntax (double curly braces), which is used to spell out the data in JavaScript that should be rendered in the DOM. The double curly braces and the component data are defined in the HTML template.
<p>Your Name: {{ name }} </p>
The value of the name as defined in the script data is what will be displayed when the application is rendered.
This property is what makes it possible for the HTML to re-render the JavaScript state each time it gets updated or changed.
This double curly brace only works between HTML opening and closing tags. To set the state of dynamic values in an HTML attribute, you need to make use of another Vue property, which is the “Vue Directive.”
These directives are HTML attributes made available with Vue that allow you to manipulate the DOM. They are an essential feature of Vue. Some built-in Vue directives are; v-on, v-for, v-model, v-pre, v-html, v-else, etc. These directives allow you to render an HTML element conditionally, attach an event listener to listen to events, act on HTML elements, etc.
You apply a directive to an HTML element by writing the directive name within the opening tag of the HTML element and attaching it to the data property it should act on.
Consider some examples
<div v-for="(todo, i[0] ) in todos">
{{ todo.name }}
</div>
data() {
return {
todos: [
{ id: 1,
name: "Joe",
},
{ id: 2,
name: "Jane",
}
],
};
},
Thev-for directive here renders the todo specified by its index from the list of tasks. Thein syntax lets the v-for directive access the todos array and iterates on the todo with the id specified by its index.
<p v-html="goal"> </p>
data() {
return {
goal: "Learn Vue",
};
},
Here, the property goal is no longer placed in double curly braces but in double quotes. This tells Vue that the value is to be interpreted as HTML and not just text that looks like HTML. This directive is used when you want to tell Vue to treat content stored in Vue as HTML.
This is only an overview of how the Vue directives work. There is another important directive that you will now consider in the next section.
V-bind
Vue has made available the v-bind directive, which you can use to bind HTML attributes or a component property to JavaScript expressions. The v-bind dynamically sets the value of an HTML element attribute and allows the attribute's value to be dynamically changed with each change in data.
<p> I am a < v-bind:href="link">Link</p>
data() {
return {
link: 'https://vuejs.org/'
};
}
v-bind tells Vue to "bind," i.e., set the value of something.
Here, it works by setting the HTML tag, a, to the value of the HTML attribute, href. And the value of the attribute, which is the "link" points to the value defined in the data property. V-bind also has a shorthand that eliminates the v-bind word and uses just the colon symbol.
:href="link";
The shorthand of the previous example.
So if you need to set the value on an HTML tag to an attribute like "href," you use v-bind. It is a reserved name and so it is understood by Vue.
There is yet another directive provided by Vue that you will consider.
V-model
Vue v-model directive is a concept also referred to as two-way binding because of its mode of operation. It works by binding a value in the template to the value in the data property.
Consider this example:
<template>
<input type="text" v-model="name">
<button v-on:click="clearInput">Clear Input</button>
<p> Enter Name: {{ name }} </p>
data() {
return {
name: ''
};
},
methods: {
clearInput() {
this.name = '';
}
}
In this case, it binds the name in our template to the data property. It is managing the data property by listening to the input and setting it back to the input through its property name value.
How v-model is similar and yet different from v-bind
In the example shown, v-bind would set the input value of the name but would not listen to or save any changes in the input. If v-bind is being used to achieve the results of the v-model, i.e., binding both ways, you'll have to use it alongside the v-on directive which will listen to the input and save changes in the state. v-model eliminates the need for v-bind and v-on to be used together and helps developers write lesser and easier code.
Conclusion
The data interpolation and directive property of Vue takes on a declarative approach which allows Vue to do the work under the hood and just outputs the data. As a developer, you only have to specify the data, write the logic, and represent it in your HTML template. This is one of the features that make Vue significantly easier to write compared to other JavaScript frameworks.
In this article, you learned about Vue.js and how to use interpolation, Vue directives, and in particular, v-bind, and v-model.
If you found this helpful, you can connect with me here to get notified of new articles. You can also find me on Twitter and LinkedIn.
Till next time, keep solving problems.