Follow by Email

VueJS Data binding


Vue.js uses a directive syntax that allows you to declaratively bind the data to the HTML DOM.
 All Vue.js directives are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

Vue compiles the templates into Virtual DOM render functions. 
Vue is able to check the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

Types of binding

Text binding:
 This types of binding is for text interpolation using {{ }} syntax. It gets updated whenever the values of “empname”, “department” changes.



    <div id="vueapp">
    <h3> VueJs data binding examples</h3>
    <h5>Employee name : {{empname}}</h5>
    </div>



HTML binding:
{{ }} interprets the data as plain text, not HTML. In order to parse HTML, you will need to use the v-html directive.



    <div id="vueapp">
    <h3>VueJs data binding examples</h3>
    <div v-html="htmlcontent">
     {{htmlcontent}}
    </div>
    </div>



Attribute binding:
v-html or {{ }} cannot be used for attributes, for attribute binding v-bind directive is used.



    <div id="vueapp">
    <h3>VueJs data binding examples</h3>
    <div v-bind:id="bindDiv">
    </div>
    </div>