Vue.js has earned its reputation as a progressive JavaScript framework. You can use Vue.js to build single-page applications (SPAs) or develop specific user interfaces.
Here you will learn the basics of Vue.js, including how to create a Vue component and work with the options object to render dynamic data.
Including Vue Through the CDN Link
Vue.js is one of the most popular JavaScript frameworks. To get started with Vue, and to add it to your HTML page, copy the script tag below and paste it into the head section:
<script src="<https://unpkg.com/vue@3/dist/vue.global.js>"></script>
Using the CDN link is an excellent option to improve static HTML or add functionality to your application.
However, you need to install Vue.js via npm to use more of its advanced features, such as the Single-File Component (SFC) syntax, which are helpful when building full-fledged Vue apps.
Creating a Vue Application
Accessing the Vue library via the CDN link provides a Vue object, including the .createApp() method.
As the name implies, you can create a Vue app using this method.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<script>
const app = Vue.createApp();
</script>
</body>
</html>
Here the created app is stored in the app variable. After creating the app instance, you must render it using the .mount() method. This method tells where to mount the app in the Document Object Model (DOM).
Like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp();
app.mount("#app");
</script>
</body>
</html>
To use Vue's .mount() method, you must provide a DOM element or selector as an argument. In this example, we mounted the Vue app using the DOM element with the #app ID.
It is important to note that the Vue app only controls elements that were specified using an id. Also, the app doesn't have control over anything outside those elements, including click events or any other interactivity.
The final step of creating a Vue application is to call the .mount() method after completing all the app configurations.
The Options Object in Vue
In Vue.js, you use the Options object as a configuration object to create a Vue instance or component.
It is an essential part of a Vue application as it defines the behavior and data for each instance or component. The Options object consists of several properties representing various aspects of the instance or component.
Some of the commonly used properties in the Options object are:
- data: This property defines the data object for the Vue applications. It is a function that returns an object which contains the data properties and their initial values.
- methods: The methods property of the Options object holds vital functions in enabling dynamic rendering.
- template: This property defines the HTML template for the Vue instance or component. It is a string containing the HTML markup, which Vue's template compiler can parse.
Note that when using a template property, the Vue compiler will only render content defined in the template.
Here’s an example of a Vue app with the data, methods, and template properties:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1 @click="reverseMessage" >{{ text }}</h1>
</div>
<script>
const app = Vue.createApp({
// template: '<h1>Welcome to your Vue app</h1>',
data() {
return {
text: "This is your Vue App"
};
},
methods: {
reverseMessage () {
this.text = this.text.split('').reverse().join('')
}
}
});
app.mount("#app");
</script>
</body>
</html>
This program depicts a basic Vue app that displays the text "This is your Vue App" using text interpolation and allows users to click on it to reverse the message.
The data() function returns an object with a single property called text. The @click directive is used to attach a reverseMessage() method to the <h1> element, which reverses the text property.
On running this program, the created Vue app will look like this:
Clicking on the text will reverse it.
Note that the program commented out the template property in order to allow the contents in the Vue app to be rendered. If left without comment, this Vue app will only show a template property:
There are other properties like props and computed, which you can also utilize to create powerful and flexible Vue applications when configuring the Options Object.
Text Interpolation in Vue
Text interpolation in Vue is a feature that allows you to bind data to HTML elements dynamically. In other words, it will enable you to directly output the value of a Vue instance's data properties in the HTML.
To achieve text interpolation in Vue, you need to wrap the name of the data property in double curly braces. Vue interprets the contents inside the double curly braces as JavaScript expressions, and it further replaces them with their resulting value.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>Welcome {{ name }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: "This is your Vue app.",
name: "Noble",
};
},
});
app.mount("#app");
</script>
</body>
</html>
In this example, the text interpolation binds the message and name properties of the data object returned in the Vue instance to the <h1> and <p> elements. Once the Vue application mounts, it displays the values of the message and name properties in the HTML at their respective positions.
You can also display the result of a method call or perform basic JavaScript operations within the double curly brackets:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<h3>Welcome {{ name.toUpperCase() }}</h3>
<p>There are {{ nameLength() }} letters in your name.</p>
</div>
<p>not here</p>
<script>
const app = Vue.createApp({
data() {
return {
message: "This is your Vue App",
name: "Noble Okafor",
};
},
methods: {
nameLength() {
return this.name.length - 1;
},
},
});
app.mount("#app");
</script>
</body>
</html>
In this example, the Vue app has a data object that contains two properties: message and name.
Inside the Vue app, the three HTML elements display data using the Vue instance. The h1 element displays the value of the message property, while the h3 element displays the value of the name property with a toUpperCase() method applied to it.
The p element displays the returned result of the nameLength() method defined in the methods object of the Vue app. The nameLength() method returns the length of the name property subtracted by one.
To access a value from the data object in the methods object, you need to use this keyword. this keyword refers to the current Vue instance and allows you to access its properties and methods from within the Vue instance. By using this, you can retrieve the value of the name property and perform any necessary manipulations on it using the methods.
This Vue app demonstrates how to bind data to HTML elements using text interpolation and how to define and call methods in a Vue instance.
Build Your Front-End Using Vue
In this article, you learned how to start working with Vue and interpolate text with Vue's templating syntax. You can access several other features in Vue, like directives and lifecycle hooks, making it an excellent choice for building dynamic front-end applications.