How to create instances in Vue.js

In this tutorial, we will learn how to create instances in Vue.js. Vue instance are the way to access the properties and methods passed in Vue Class options.

Method 1 : Creating Direct Instance

Create File app.html

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

Create File vue_component.js

var  vm = new Vue({
   el: '#component_test',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      address    : "Mumbai"
   },
   methods: {
      mydetails : function() {
         return "I am "+this.firstname +" "+ this.lastname;
      }
   }
})

Method 2 : Create Instance of Extended Component

var _obj = { fname: "Raj", lname: "Singh"};

// must use function when in Vue.extend()
var Component = Vue.extend({
data: function () {
   return _obj
},
methods: {
   asquare: function () {
      this.fname = 'Chetan';
   }
}
});
var myComponentInstance = new Component();
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);
console.log(myComponentInstance.asquare());
console.log(myComponentInstance.$data);

Now, run this code and create instance in vue.js

Recommendation

How to create components in vue.js

For more Vue.js Tutorials visit Vue.js page.

If you like this, share this.