Vue.js Components and Computed Properties

What is Vue Components ?

Vue Components are one of the important features of Vue.js that creates custom elements, which can be reused in HTML.

Let us consider an example and create a component, that will help us understand how components work with Vue.js.

component.html

In the component.html file, we have created two div with id test1_component and test2_component.

compnent.js

In the component.js file, we have created two Vue instances with the div ids. We have created a common component to be used with both the view instances.

To create a component, following is the syntax.

Vue.component('nameofthecomponent',{						.	// options											});

Once a component is created, the name of the component becomes the custom element and the same can be used in the Vue instance element created, i.e. inside the div with ids test1_component and test2_component.

In the component.js file, we have used a test component as the name of the component and the same name is used as the custom element inside the component.html divs.

<div id="test1_component">							        																							.	<testcomponent></testcomponent>				</div>												<div id="test2_component">							.	<testcomponent></testcomponent>				</div>

The component created in the component.js file, we have added a template to which we have assigned a HTML code. This is a way of registering a global component, which can be made a part of any vue instance.

The browser will display the same instances.

Output:

Dynamic Components

Dynamic components are created using the keyword<component></component>and it is bound using a property as shown in the following example:

dynamic_component.html

Output:

The dynamic component is created using the following syntax.

<component v-bind:is = "view"></component>

It has v-bind:is = ”view”, and a value view is assigned to it. View is defined in the Vue instance as follows.

var vm = new Vue({    									.	el: '#databinding',    									.	data: {       										.	view: 'component'},    								.	components:{									.		'component':{								.			template:'<div><span style = "font-			.					size:25;color:red;">Dynamic		 .					Component</span></div>'			.		}													.	}													});

What is Vue.js Computed Properties ?

Vue Computed properties are like methods but with some difference in comparison to methods. After learning the difference, we will be able to make a decision on when to use methods and when to use computed properties.

Let us consider an example to understand computed properties:

computed_property.html

computed_property.js

Here, we have created computed_property.html file with firstname and lastname. Firstname and Lastname is a textbox which are bound using properties firstname and lastname.

We are calling the computed method getfullname, which returns the firstname and the lastname entered.

computed :{												    .	getfullname :  function(){							.		returnthis.firstname +" "+this.lastname;				.	}												}

When we type anything in the textbox the same is returned by the function, when the properties firstname or lastname is changed. Thus, with the help of computed we don’t have to do anything specific, such as remembering to call a function. With computed it gets called by itself, as the properties used inside changes.

The same will be displayed in the browser. Type the values in the textbox and the same will get updated using the computed function.

Output:

If you have any queries regarding this blog or need any help you can contact us on: contact@codersarts.com