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