Value provider and Action provider in Salesforce Lightning

Value provider is a way to access data. The value provider is denoted with v(view) and the action provider is denoted with c(controller), with value provider "v" we can fetch value of an attribute from component markup in javascript controller. Action provider enables us to handle actions.

Value provider:

The value provider enables us to access the value of a component attribute in component markup and javascript controller.

<aura:component>

 <aura:attribute type="string" name="myfirstattribute" default="first text"/> 

{!v.myfirstattribute} // Fetching value from attribute.

</aura:component>

Action provider:

The action provider enables us to handle actions, events, handlers for the component.

Let's understand with a simple example.

Step 1:Build a  lightning component.

<aura:component  >

        <aura:attribute type="string" name="myfirstattribute" default="first text"/>

    Default value of attribute:

    {!v.myfirstattribute} // Value provider

    <lightning:button label="clickme" onclick="{!c.method1}" /> <!--Action Provider-->

 // Handling on click event of  button by using c and calling the method of javascript controller.

</aura:component>

Note: We are using a string type attribute with default value as "first text", as the component loads we will get value as "first text" and on click, on the button, we are changing the value from "first text" to "Second text".

Step 2: Build a controller.

({

 method1 : function(component, event, helper) {

      var action=  component.get("v.myfirstattribute"); // using value provider in javascript controller to get attribute value.// Note: Use double quote with value  .

        var secondvalue="Second text";

        component.set("v.myfirstattribute",secondvalue); //setting some other value in attribute.

 }

})

Step 3:Build a lightning app for previewing the component.

<aura:application extends="force:slds">

    <c:Firstlightningcomponent/>

</aura:application>