Vue JS Basics (Questions/Answers) : Abhishek Chaturvedi

How to create an instance in Vue?

In VueJS, the application starts by creating a new Vue instance with this function :

var vm = new Vue({
//some code or options

The standard way to follow is to use the variable vm which is donated as ViewModel from which we can refer our Vue instance.
Let me example this via a basic example to better understand what needs to be part of the Vue constructor.

<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<div id = "app">
<h1>Name : {{name}}</h1>
<h1>Age : {{20}}</h1>
<script type = "text/javascript" src = "js/vue_instance.js"></script>

And the vue_instance.js will look like :

var  vm = new Vue({
el: '#app',
data: {
name : "Abhishek Chaturvedi",
age : 20
methods: {
info : function() {
return "Hello, My name is " +" and my age is "+ this.age;

el is a parameter in Vue which takes the id of the DOM element. In our example, we have -”app”.
In our Vue instance we’ve defined the data object and methods. Which we are using in the html to display the data using interpolation.
The interpolation here is donated by {{}}.
And the output will be:




Technical Architect | Model | Actor | Photographer | Boxer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Evolution of Async JavaScript: From Callbacks, to Promises, to Async/Await


Benefits Of Upgrading Your Framework From AngularJS To Angular

Props in React Components


How to Validate an Email Address in JavaScript

8th React Native + 2nd Flutter Meetup Bangalore 2019

React Native And The Red Screen of Depression😥😡

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Chaturvedi

Abhishek Chaturvedi

Technical Architect | Model | Actor | Photographer | Boxer

More from Medium

How is working laravel services?

Using Dropzone Multiple Image Upload In Laravel

Laravel asset compilation for Laravel 9 + Laravel Mix 6 + Font Awesome 6