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>

Tutorials