<img height="1" width="1" style="display:none;" alt="" src="https://ct.pinterest.com/v3/?event=init&amp;tid=2612994575055&amp;pd[em]=<hashed_email_address>&amp;noscript=1">
Skip to content
    AdminOct 12, 2023 6:21:33 PM< 1 min read

    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.

     

    COMMENTS

    RELATED ARTICLES