Vue.js Instances
Vue.js Instances
It is essentially a ViewModel according to the MVVM pattern; hence we will see the variable name vm throughout the docs.
To start a Vue.js application, we need to create the instance of Vue with the help of the Vue function, which is called the root Vue instance. The following are the syntax of a Vue instance in vue.js:
Syntax:
Varvm = new Vue ({
// options
})
Example: This example helps us to understand how we can use the Vue instance in the Vue.js application.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue instances</title>
</head>
<body>
<div id="app">
<h1>Fisrname: {{ firstname }}</h1>
<h1>Lastname: {{lastname}} </h1>
<h1>Address: {{address}}</h1>
<h1>{{mydetails()}}</h1>
</div>
</body>
</html>
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm = new Vue({
el : '#app',
data () {
return {
firstname : "Smith",
lastname : "Johnson",
address: "London"
}
},
methods: {
mydetails: function(){
return "I am "+ this.firstname +" "+this.lastname;
}
}
})
Output: When we execute this code, we will get the output, as shown below:
In the above example, there is an id = app, which is the id of the div component available in the Index.html file. For the Vue, we used a parameter which is known as el. This el takes the id of the DOM element from Vue file.
<div id = "app"></div>
Next, we have defined the data objects in the Vue file, including values firstname, lastname, and address. These values are assigned in the div tag.
<div id ="app">
<h1>Fisrname: {{ firstname }}</h1>
<h1>Lastname: {{lastname}} </h1>
<h1>Address: {{address}}</h1>
<h1>{{mydetails()}}</h1>
</div>
These values are going to be replaced in the interpolation {{}} with the value assigned in the data object.
In the Vue instance, it is required to pass options to the Vue constructor, such as data, template, methods, callback, etc.
Now, we are going to discuss the options to be passed in the Vue instance.
Data
It is type of data that can be an object or a function. Vue.js converts the properties of the data to getters/setters that makes it reactive.
Example: In the below example, we are going to explain how we can use the data options in the Vue instance.
Index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue.js Instance</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <body> <div id="app"> </div> </body> </html>
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var _obj = { firstname: "John", lastname: "Peter"}
var vm = new Vue({
data: _obj
});
console.log(vm.firstname);
console.log(vm.$data);
console.log(vm.$data.firstname);
Output: After executing this code, we will get the output, as shown below:
In the above program, we can see that the console log is used to print the details, as shown below:
console.log(vm.firstname); // It prints the first name console.log(vm.$data); // It prints the full object console.log(vm.$data.firstname); // It prints the first name
If there is a Vue component, the data object must be referred by a function, as shown below:
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var _obj = { firstname: "John", lastname: "Peter"};
var vm = new Vue({
data: _obj
});
console.log(vm.firstname);
console.log(vm.$data);
console.log(vm.$data.firstname);
var Component = Vue.extend({
data: function () {
return _obj
}
});
var myComponentInstance = new Component();
console.log(myComponentInstance.lastname);
console.log(myComponentInstance.$data);
Output: After executing this code, we will get the output, as shown below:
In the above example, we have used the data as a function, which is used with the Vue.extend.
var Component = Vue.extend({
data: function () {
return _obj
}
})
Props
Vue.js can use type for the prop as a string or an object array. It takes syntax based on an array or an object. Props are said to be attributes, which is used to accept information from the parent elements. The following are the syntax that can be used for props:
Syntax:
Vue.component (‘prop name’,{
Props: [‘size’, ‘message’]
})
propsData: The propsData is used for the unit testing. During the creation of Vue instance, it is required to passed this propsData method.
Type: array of string.
Syntax:
{[key: string]: any}
Example:
var Comp = Vue.extend({
props: ['name'],
template: '<div>{{ name }}</div>'
})
var vm = new Comp({
propsData: {
name: 'hi! John'
}
})-
Computed: Type of computed function is: {get: function, set: function}
Example: This example explains how we can use the use the computed function in Vue instance.
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm = new Vue({
data: { a: 5 },
computed: {
aSum: function () {
return this.a + 10;
},
aSquare: {
get: function () {
return this.a*this.a;
},
set: function (v) {
this.a = v*4;
}
}
}
})
console.log(vm.aSquare);
vm.aSquare = 8;
console.log(vm.a);
console.log(vm.aSum);
Output: After executing this code, we will get the output, as shown below:
In the above example, we have used the two functions, which are a.sum and a.square.
Methods: The methods are part of the Vue constructor. Methods can be added with the Vue instance. Let’s take an example to understand how we can use the methods in the Vue instance.
Example:
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm = new Vue({
data: { a: 12 },
methods: {
asquare: function () {
this.a *= this.a;
}
}
})
vm.asquare();
console.log(vm.a);
Output: After executing this code, we will get the output, as shown below;
In the above example, we have used a.square function to get the square of the number.