Do you think IIT Guwahati certified course can help you in your career?
Introduction
Vue.js is a powerful yet lightweight frontend framework used for building single-page applications. It was created by developer Evan You, an ex-Google employee and was initially released in 2014.
Vue.js has a very strong and supportive community. Besides React and Angular, it is one of the most popular and loved JavaScript frameworks. It is designed in a way that it can be easily integrated into big frontend applications without any hassle.
MVVM(Model-View-ViewModel) pattern
The Model-View-ViewModel or the MVVM pattern inspires Vue.js.
MVVM is the industry standard software architecture pattern that separates the UI and backend of an application.
The three separate layers in MVVM architecture are
Model
View
ViewModel
The Model layer consists of the logic part of the application.
The View layer consists of the GUI portion of the application.
The ViewModel layer is a bridge between the Model and the View layer. It handles the display logic of the View layer.
Vue.js focuses on the view layer of the application. Every Vue.js application starts with a Vue Instance and links the View part with the ViewModel( Vue Instance) using dynamic binding. Let us understand it better using a code snippet.
NOTE:Do not worry if the code seems overwhelming to you; it is meant for understanding the MVVM pattern better. You will indeed have a proper understanding of the code by the end of the blog.
Installation
There are four ways to install Vue.js:
Import Vue.js as CDN package
Installing using npm
Using CLI
Downloading JavaScript files and hosting yourself
Import Vue.js as CDN package
If you are using Vue for educational purposes, you have to include the below script in your code to use Vue.js.
But if you are using it for production, the documentation recommends you use a specific version number and build.
Install using npm
For installing Vue.js using npm, you have to first install npm. If npm is installed, you can go ahead and run the below command in the terminal window of your favourite IDE. In our case, we are using the terminal of VS Code,
npm install vue@next
You can also explore the other two installation methods here from the official documentation of Vue.js.
Features
Let us now look at some of the fundamental features of Vue.js to help you get started.
Vue Instance
Every Vue.js application starts with a Vue Instance. We create a Vue instance using the Vue function.
var app = new Vue({
// options object
})
You can also try this code with Online Javascript Compiler
Every Vue Instance is essentially a ViewModel. Before we do anything else, our application needs to instantiate Vue Instance and pass an ‘options object’ along with it. The options object can have information about DOM elements, data, methods etc. The Vue constructor accepts the ‘options object’.
index.html
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<!-- rendering the data to DOM -->
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{speak()}}</h1>
</div>
<script src="index.js"></script>
</body>
</html>
index.js
// instantiating a Vue instance
var app = new Vue({
// el is the id of the DOM element
el: '#app',
// data
data: {
firstname: "John",
lastname: "Doe"
},
// methods
methods: {
speak: function () {
return "Hi there! I am " + this.firstname + " " + this.lastname + ".";
}
}
})
You can also try this code with Online Javascript Compiler
In the index.js, we created a variable called ‘app’ and assigned it to the Vue instance.
We used the parameter ‘el’ inside the curly braces. This ‘el’ carries the id of the DOM element. You can see that in index.html, we have created a div with id #app and our el parameter also has id #app.
Therefore changes corresponding to our logic in index.js will be reflected only within the div with id ‘app’ and nowhere else.
We also have a data object with‘ firstname’ and ‘lastname’ properties.
We also have methods; one method used is called speak().
Declarative rendering
We can render data to DOM declaratively very easily using Vue.js.
index.html
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
Hi Ninja! Here's a special message for you 😍
<div id="app">
<!-- rendering the data 'special_msg' to DOM -->
<h1>{{special_msg}}</h1>
</div>
<script src="index.js"></script>
</body>
</html>
index.js
// instantiating a Vue instance
var app = new Vue({
// el is the id of the DOM element
el: '#app',
// data
data: {
special_msg: "You are AWESOME!"
}
})
You can also try this code with Online Javascript Compiler
This special_message is then rendered declaratively to the DOM in index.html. Vue.js uses double curly braces {{ }} as place-holders to interpolate data to the DOM.
So within div #app we have enclosed the special_msg within {{ }} double curly braces.
<div id="app">
<!-- rendering the data 'special_msg' to DOM -->
<h1>{{special_msg}}</h1>
</div>
Templates
Vue.js templates are valid HTML that can be parsed by browsers and HTML parsers. As Vue uses an HTML-based template syntax, it allows developers to declaratively bind the rendered DOM to the underlying component instance's data.
We saw in our previous example code that we could interpolate data using {{ }} double curly braces. But in the case of raw HTML, double curly braces won’t render the HTML content; instead, the plain text will get generated.
We have to use the ‘v-html’ directive for rendering HTML content.
index.html
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<!-- rendering the data to DOM -->
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<!-- using v-html directive to see the output of html code -->
<div v-html="htmlcode"></div>
</div>
<script src="index.js"></script>
</body>
</html>
index.js
// instantiating a Vue instance
var app = new Vue({
// el is the id of the DOM element
el: '#app',
// data
data: {
firstname: "John",
lastname: "Doe",
htmlcode: "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>"
}
})
You can also try this code with Online Javascript Compiler
Directives are special HTML attributes that are used to modify the behaviour of HTML elements residing inside the DOM. The directives in Vue start with a ‘v-’ prefix.
In addition to tons of in-built directives in Vue, we can also define our very own custom directives. We have already seen one directive, i.e. ‘v-html’, and its use.
A few important directives are,
v-text
v-html
v-bind
v-show
v-for
v-if
v-else
v-else-if
v-on
Components
Components are a vital part of Vue.js, which lets us divide our application into smaller, reusable subparts that can be composed to make very complex user interfaces. With the power of components, a typical large application can be broken down into a tree of components.
Frequently Asked Questions
Q1. What is DOM?
Ans: DOM (Document Object Model) is the browser’s internal programmatic representation of the webpage. A DOM is created whenever a web page is loaded.
Q2. Why is Vue.js popular?
Ans:
Lightweight: It is incredibly lightweight with a size of just 18 kilobytes.
Flexibility: It is incrementally adaptable and integrated with existing applications without much hassle.
Ease of learning: Vue.js is very easy for beginners, unlike React and Angular. It has a much steady learning curve and only requires coders to have basic HTML, CSS, and JavaScript knowledge to get started.
Documentation: It has excellent documentation, and a ton can be learned from the documentation page alone. You can check out their documentation page here.
Speed and performance: It is a high-speed framework and takes little time to launch applications.
Customization: All functions of Vue.js are freely accessible, making it very easy for developers to modify web applications according to specific requirements.
Q3. What are filters in Vue.js?
Ans: Filters in Vue.js are used to change/filter data in an application. Filters do not change the data directly; instead, only the output of the data to the browser is changed.
Q4. What is Vuex?
Ans: Vuex is a library/state management pattern used with Vue.js. It allows us to create a centralized data store that all components can access in the application.
Key Takeaways
In this blog, we got a basic understanding of what Vue.js is and also learned about its different features.
136+ registered 
