How to create instances in Vue.js – Jaeves Codelab

Written by Admin | Oct 12, 2023 10:21:33 PM

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.

View full post