Vue.js Data Binding Syntax

We know, Vue.js is the hot topic as per the current technology trend. Trying to cover Vue.js data binding syntax with the example.

Vue.js uses a DOM-based templating implementation. This means that all Vue.js templates are essentially valid, parsable HTML enhanced with some special attributes.

Interpolations

1. Text
The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):

It a simple variable value display withing HTML.

Here msg is the property of data object. It will also be updated value whenever the data object's msg property changes.

You can also perform one-time interpolations that do not update on data change:

 
This will never change: {{* msg }}

2. Raw HTML
When we need to display real HTML then you will need to use triple mustaches because we have seen double mustaches use for plain text display.

using triple mustaches contents are inserted as plain HTML.

3. Attributes
Mustaches can also be used inside HTML attributes:

When required dynamic ids or any attributes that time attributes binding useful.

Note that attribute interpolations are disallowed in Vue.js directives and special attributes. Don’t worry, Vue.js will raise warnings for you when mustaches are used in wrong places.

Binding Expressions
The text we put inside mustache tags is called binding expressions. In Vue.js, a binding expression consists of a single JavaScript expression optionally followed by one or more filters.

1. JavaScript Expressions
We have seen simple property key binding so far. But Vue.js actually supports the full power of JavaScript expressions inside data bindings:

Make sure whatever inside the mustaches it's one single expression. so you can't declare the variable or flow control condition inside the mustaches.

Vue.js is smart to raise the error if you put something in the wrong place.

2. Filters
Vue.js support optional "filters". Append to the end of an expression, denoted by the “pipe” symbol:

Vue.js provides a number of built-in filters so we can pick one of if here.

Here we are “piping” the value of the message expression through the built-in capitalize filter

Directives
Directives are the special attributes with v- prefix. I think each client-side framework have directives.
Vue.js has also provided the same with v- prefix. Directive attribute values are expected to be binding expressions, so the rules about JavaScript expressions and filters mentioned above apply here as well. A directive’s job is to reactively apply special behavior to the DOM when the value of its expression changes.

Here, the v-if directive would remove/insert the element based on the truthiness of the value of the expression greeting.

1. Arguments
Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind directive is used to reactively update an HTML attribute:

Here href is the argument, which tells the v-bind directive to bind the element’s href attribute to the value of the expression url. You may have noticed this achieves the same result as an attribute interpolation using href="{{url}}": that is correct, and in fact, attribute interpolations are translated into v-bind bindings internally.

Shorthands
Vue.js provides special shorthands for two of the most often used directives, v-bind and v-on:

1. v-bind Shorthand

2. v-on Shorthand

Hope you like it. Next blog also be on Vue.js