Anything inside the {! } or {# } delimiters is evaluated and replaced when the component is rendered or when it uses the value. Unbound attributes are designated by {# } and do not update if the underlying object or attribute has changed.

Unbound Attribute Example:

Child Component

<aura:component>
    <aura:attribute name=”childAttr” type=”String” />
    <p>childAttr: {!v.childAttr}</p>
</aura:component>

Parent Component

<aura:component>
    <aura:attribute name=”parentAttr” type=”String” default=”parent attribute”/>

    <!– Instantiate the child component –>
    <c:childComponent childAttr=”{#v.parentAttr}” />
    <br/><br/>
    <p>parentAttr: {!v.parentAttr}</p>
    <br/><br/>
    <p><lightning:button label=”Update parentAttr” onclick=”{!c.updateParentAttr}”/></p>
</aura:component>

({
    updateParentAttr: function(cmp) {
        cmp.set(“v.parentAttr”, “updated parent attribute”);
    }
})

App

<aura:application >
    <c:parentComponent />
</aura:application>

Output:

Before clicking Update parentAtt:

After clicking Update parentAtt:

Bound Attribute Example:

Child Component

<aura:component>
    <aura:attribute name=”childAttr” type=”String” />
    <p>childAttr: {!v.childAttr}</p>
</aura:component>

Parent Component

<aura:component>
    <aura:attribute name=”parentAttr” type=”String” default=”parent attribute”/>

    <!– Instantiate the child component –>
    <c:childComponent childAttr=”{!v.parentAttr}” />
    <br/><br/>
    <p>parentAttr: {!v.parentAttr}</p>
    <br/><br/>
    <p><lightning:button label=”Update parentAttr” onclick=”{!c.updateParentAttr}”/></p>
</aura:component>

({
    updateParentAttr: function(cmp) {
        cmp.set(“v.parentAttr”, “updated parent attribute”);
    }
})

App

<aura:application >
    <c:parentComponent />
</aura:application>

Output:

Before clicking Update parentAtt:

Check the below link for more information

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_data_binding.htm