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:



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