How to create instances in Vue.js

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.

Follow us on FacebookTwitterTumblrLinkedInYouTube.

ReadyMadeCode
Author: ReadyMadeCode

ReadyMadeCode.com is a website where you can find Free Online Tutorials - Website Development Tutorials, App Development Tutorials, Coding Tutorials,Website Designing and Development From popular programming languages or scripts or framework like php, laravel, html, css, javascript, nodejs, java, angularjs etc. Download Emails | E-Books.

View All Posts From ReadyMadeCode
Author Website : https://www.readymadecode.com

Enter Your Comments Here...

Enter Your Comments Here...

Scroll to top

Subscribe For Latest Updates

Enter your email address to subscribe and receive notifications of posts & updates by email.


Want a Website / App / Digital Marketing Solution

Website & App Development Packages

%d bloggers like this:
We have updated our memberships. Please check here
Close X