Skip to content
Related Articles

Related Articles

Improve Article

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:

  1. EL
  2. Data
  3. Methods
  4. Computed
  5. Watch
  6. 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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :