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.

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

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 "+this.name +" 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

Trip report from ngAtlanta: Angular’s Roadmap, Inclusion, and more

Intro to Nestjs Framework for Reliable Server-Side Apps on Nodejs

4 Ways to Safely Access Nested Objects in Vanilla Javascript

Redux can be Rough

Infinite Scrollable List With Loading Icon in React Native

The 10 Concepts about JavaScript

How to setup React Router

How to handle unhandledrejection errors using axios

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

Generators in Javascript ES6

How to delete all node modules in a folder and Free up HD space!

Setting up node express project

Koa Js- Node Js RESTful API