Introduction to Vue.js Instance
Last Updated :
15 Oct, 2020
What are Vue Instances?
Vue.js is a frontend JavaScript framework developed by open source developers. It is generally used for building single-page applications. To learn more about VueJS please refer to Vue.js | Introduction & Installation.
VueJS does not have the HTML code at runtime, instead VueJS creates a template based on our HTML code and stores that to Virtual DOM & then uses this template to render the original HTML code which then is rendered as the actual DOM. VueJS instance is a mediator between DOM elements of the HTML webpage and the application logic in JavaScript. VueJS instance is specifically a View-Model according to the definition in MVVM pattern. Basic syntax to demonstrate the connection between HTML code and the Vue Instance defined as View-Model in VueJS is:
Javascript
<div id="app"></div>
<script>
new Vue({
el: "#app"
});
</script>
|
We can access the instance from anywhere in the scope of the program. But in an instance, we can only access the properties defined for that instance by using THIS keyword. In other words, there is no direct connection between the two instances in a program.
Properties / Options in Vue.js Instance: Since the MVVM pattern also contains binding HTML elements with VueJS. But to bind Vue instance with DOM elements, we have some special properties along with a Vue Instance. The properties are:
- EL
- Data
- Methods
- Computed
- Watch
- Template
Let’s understand each of these options in brief with an example:
1. EL: This option is generally used to map the instance to an HTML element and connect with DOM. It mounts the instance with the HTML element and complies with the creation of the program/instance. EL acts as a query selector of JavaScript, we can mount EL with ID or className. We can mount the element at the creation or on a later stage based on the application. Example:
Javascript
<div id="app"></div>
Type 1:
<script>
new vue({
el: "#app"
});
</script>
Type 2:
<script>
var vm = new vue({
...
});
vm.$mount("#app");
</script>
|
2. Data: It is one of the most important properties of an instance. All the data properties are stored to be used in a program and complied when the instance is created. We can bind data elements with DOM for dynamic reaction on the webpage instead of reloading the entire content. We can store any type of data element in this option, generally all possible data elements used in VanillaJS are valid here. Example:
Javascript
<div id="app">
<h1> Name: {{ name }} </h1>
<p> Male: {{ isMale }} </p>
....
</div>
<script>
new vue({
el: "#app",
data: {
name: "John",
isMale: true,
personalDetails: {
hobbies: ["cricket","football],
age: 20
}
}
});
</script>
|
OUTPUT:
Name: John
Male: true
As explained in the example, the <h1> tag will replace its content based on changes made on the NAME variable created in the Vue instance. This process is termed as Binding, generally used to achieve the dynamicity of the webpage.
3. Methods: Every Vue instance can have its own set of functions/methods for a modular program structure. There are few inbuilt function definitions for an instance (From instance life cycle). We can also define our own set of functions in the “METHODS” property. They are compiled along with data properties on the creation of an instance. Example:
Javascript
<div id="app">
<p> {{ getName() }} </p>
</div>
<script>
new vue({
el: "#app",
data: {
name: "John"
},
methods: {
getName: function() {
return (this.name);
}
}
});
</script>
|
OUTPUT: John
As explained in the example, we can access data items via instance methods and can be bound with the DOM element.
4. Computed: It helps us perform calculations and transformations on our data. They are meant to transform data items for presentation only, they don’t change the actual existing data. This is a dependent property, in other words, the computed property is cached based on the reactive dependencies of the data elements.
In computed property, it is aware whether the function inside it is affected by changes in any data property. Example:
Javascript
<div id="app">
<p> {{ getFullname }} </p>
</div>
new Vue({
el: '#app',
data: {
name: "John"
},
computed: {
getFullname: function()
{
return this.name+" Dave";
}
}
});
|
OUTPUT: John Dave
5. Watch: This property is widely used when implementing dynamic webpages. It executes method/code upon data changes. It automatically executes code when there are any changes from any other method or user interaction with the webpage. The only prerequisite of implementing WATCH is to have associated data property in the instance.
Generally, it is used when we want to do some asynchronous task (Retrieve information from the server). Example (On button click, the value of Counter will change):
Javascript
<div id="app">
<label>Counter: {{Counter}}</label>
<br>
<button @click="Counter = 1">Click Me</button>
</div>
new Vue({
el: '#app',
data: {
Counter: 0
},
watch: {
Counter: function(val)
{
this.Counter = 10;
}
}
});
|
OUTPUT:
Counter : 10
Click Me
6. Template: This property is responsible to create HTML elements from instance. It simply replaces the content inside the property with the DOM. On compilation, it just places the HTML elements into virtual DOM and when required it gets placed to actual DOM. Example:
Javascript
<div id="app">
<dataTemplate></dataTemplate>
</div>
var dataTemplate = new Vue({
el: '#app',
template: '
<p>Hello World</p>
'
})
|
OUTPUT: Hello World
This concludes the topic of Vue Instance, covering all the instance properties and their working with appropriate examples.
Similar Reads
Vue.js Introduction & Installation
Vue JS is a JavaScript framework used to design and build user interfaces. It is one of the best frameworks for Single Page Web Applications. It is compatible with other libraries and extensions as well. In the development field, there may be so many issues that can not be solved by using a single l
2 min read
Svelte | Introduction and Installation
Svelte is the new methodology for creating web apps. It can be used in a small part of a code or in an entire single page application. It is a compiler not a framework, which is faster than other JavaScript libraries like ReactJS, AngularJS, VueJS. It is used to create reactive web apps. If any chan
2 min read
Introduction to VRML
VRML (Virtual Reality Modeling Language) is a file format used to create 3D interactive scenes and objects for the web. It was created in the 1990s as a way to represent virtual reality environments in a standard format that could be easily shared and viewed over the internet. VRML files contain inf
5 min read
Ember.js Introduction
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which is based on Model-View-Controller (MVC) architecture. Ember is designed for reducing development time and increasing productivity, it is one of the fastest-growing front-end application frame
3 min read
Vue.js Instances
A Vue.js application starts with a Vue instance. The instances object is the main object for our Vue App. It helps us to use Vue components in our application. A Vue instance uses the MVVM(Model-View-View-Model) pattern. The Vue constructor accepts a single JavaScript object called an options object
2 min read
Introduction to ElectronJS
Creating cross-platform applications often requires learning multiple programming languages and frameworks. However, Electron.js eliminates this complexity by allowing developers to build desktop applications using familiar web technologies like JavaScript, HTML, and CSS. In this article, we will le
5 min read
v-bind Directive in Vue.js
The v-bind directive is a Vuejs directive used to bind one or more attributes, or a component prop to an element. If that attribute is bound to our data defined in Vuejs instance then dynamic changes can be observed as data changes. First, we will create a div element with id as app, and let's apply
2 min read
Vue.js v-on:click directive
The v-on:click directive is a Vue.js directive used to add a click event listener to an element. First, we will create a div element with id as app and let's apply the v-on:click directive to a element. Further, we can execute a function when click even occurs. Syntax:v-on:click="function"Parameters
1 min read
How to use routing in Vue.js ?
Vue router: Vue Router helps link between the browser's URL/History and Vue's components allowing for certain paths to render whatever view is associated with it. A vue router is used in building single-page applications (SPA). The vue-router can be set up by default while creating your new project.
3 min read
How to create instance in Vue.js ?
A Vue.js Instance refers to a Vue constructor's instance in the Vue application. It acts as a container that holds your application's data and methods. Vue.js implements the Component-Based Architecture that enables the generation of these instances, in order to represent and manage individual compo
2 min read