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 Facebook, Twitter, Tumblr, LinkedIn, YouTube.