Vue instances in Vue js

In Vue application, you can create new vue instance by using vue function.Whenever we create a new vue project , the vue instances gets activated by default.It is called as root vue instance. Let us take the following example for vue instance.


                <html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvapp>
                    <h1>Name:{{name}}<h1>
                     <h1>Age:{{age}}<h1>
                     <h1>{{getdetails()}}<h1>
<div>
<script type=text/javascript>

var vm = new Vue({
        el:"#dvapp",
        data:
                {
                name:kanda,
                age:26
            },
        methods:{
            getdetails():function(){
        return "My Name :" + this.name + "My Age :" + this.age;
}
        },
});

<script>
<body>
<html>

After the execution of the program, you will see the following output.
Output:
Name: Kanda
Age:26
My Name: Kanda My Age:26

From the above example, you will notice the parameter called "el".The el parameter is used to carry the id of the DOM element. Inside the div you will see the interpolation for name ,age and also for the method "getdetails".

Options to be passed in Vue Instances:-

data
template
methods
computed


                <html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvapp>
                    <h1>Name:{{name}}<h1>
                     <h1>Age:{{age}}<h1>
                     <h1>{{getdetails()}}<h1>
<div>
<script type=text/javascript>
var vm = new Vue({
        el:"#dvapp",
        data:
                {
                name:kanda,
                age:26
            },
        methods:{
            getdetails():function(){
                           return "My Name :" + this.name + "My Age :" + this.age;
                }
        },
});
console.log(vm.name);
console.log(vm.age);
<script>
<body>
<html>

Happy Vue Coding !!!