Vue Data binding syntax

Data binding syntax

Vue.js templates are implemented based on the DOM. This means that all vue.js templates are parsed and valid HTML, and are enhanced by some special features. The Vue template is fundamentally different from a string-based template, so keep this in mind.

Interpolated text

The most basic form of data binding is text interpolation, using the "mustache" syntax (double braces):

<span>message: {{msg}}</span>

The mustache tag is replaced by the msg value of the property of the corresponding data object. It is also updated whenever this property changes.

You can also handle only a single interpolation, and future data changes will no longer cause interpolation updates:

<span>this'll never change: {{* msg}}</span>

The original HTML

The double mustache tag parses the data into plain text rather than HTML. In order to output a true HTML string, a three mustache tag is required:

<div>{{{raw_html}}}</div>

Content is inserted as an HTML string--data binding is ignored. If you need to reuse a template fragment, you should use partials.

Dynamically rendering arbitrary HTML on a Web site is dangerous because it can easily lead to XSS attacks. Remember, HTML interpolation is used only for trusted content and is never used for user-submitted content.

HTML Features

Mustache tags can also be used in HTML features (Attributes):

<div id= "item-{{ID}" ></div>

Note that interpolation is not allowed in the Vue.js directive and in special features. Don't worry, if the mustache tag is in the wrong place Vue.js will give a warning.

Binding an expression

The text placed inside the mustache tag is called a binding expression. In Vue.js, a binding expression consists of a simple JavaScript expression and optionally one or more filters.

JavaScript expressions

So far, our templates have only been bound to simple property keys. However, in fact, Vue.js supports fully functional JavaScript expressions within data binding:

{{number + 1?} ' YES ': ' NO ' }}{{message.split ('). Reverse (). Join (')}}

These expressions are evaluated within the scope of the owning Vue instance. One limitation is that each binding can contain only a single expression, so the following statement is not valid:

<!--This is a statement, not an expression:--var a = 1 }}<!--Process Control is also not possible, you can use a ternaryexpression--andif  return Message}}}

Filter filters

Vue.js allows you to add an optional "filter" after the expression, as indicated by the pipe symbol:

{{message | capitalize}}

Here we put the message value of the expression "pipe" to the built-in capitalize filter, which is actually a JavaScript function that returns the capitalized value. Vue.js provides several built-in filters, and we'll talk about how to develop our own filters later.

Note Pipeline syntax is not a JavaScript syntax, so you cannot use filters within an expression, only after the expression.

Filters can be concatenated:

{{message | filtera | filterb}}

Filters can also accept parameters:

{{message | filtera ' Arg1 ' arg2}}

A filter function always takes the value of an expression as the first argument. A quoted parameter is treated as a string, and the parameter without the quotation marks is evaluated as an expression. Here, the string ‘arg1‘ is passed to the filter as the second argument, and the arg2 value of the expression is calculated as the third argument.

Instructions

The directive (directives) is a special feature with a prefix v- . The value of the directive is limited to a binding expression, so the JavaScript expression and filter rules mentioned above also apply here. The duty of an instruction is to apply certain special behaviors to the DOM when the value of its expression changes. Let's look back at the example in the overview:

<p vIf= "Greeting" >Hello!</p>

Here the v-if instruction will greeting delete/INSERT elements based on the true and false of the expression value <p> .

Parameters

Some directives can be preceded by a "parameter" (Argument) and separated by a colon in the middle. For example, v-bind directives are used to update HTML attributes in a responsive manner:

<a v-bind:href= "url" ></a>

Here href is the parameter, which tells the v-bind instruction to bind the attribute of the element to href url The value of the expression. You may have noticed that you can href="{{url}}" get the same result with an attribute interpolation: that's right, and in fact the interpolation of the intrinsic attribute will be converted to v-bind binding.

Another example is the v-on instruction, which is used to listen for DOM events:

<a v-on:click= "DoSomething" >

Here the parameter is the name of the event being monitored. We will also describe the event bindings in detail.

Modifier

The modifier (Modifiers) is a special suffix that begins with a half-width period . , which indicates that the instruction should be bound in a special way. For example, .literal the modifier tells the instruction to parse its value into a literal string instead of an expression:

<a v-bind:href.literal= "/A/B/C" ></a>

Of course, this does not seem to make sense because we only need to use href="/a/b/c" a directive instead of using one. This example is just to demonstrate the syntax. Later we will see more practical usage of modifiers.

Abbreviation

v-A prefix is a visual hint that identifies a specific Vue attribute in a template. These prefixes can be a good differentiator when you need to add dynamic behavior to some existing HTML code. But when you're using some of the most common commands, you'll feel like you've been writing all the time. And when building a single-page application (SPA), Vue.js manages all the templates, and the v- prefix is less important. Therefore Vue.js is the two most commonly used instruction v-bind and v-on provides special abbreviations:

v-bindAbbreviation

<!--full syntax--><a v-bind:href= "url" ></a><!--abbreviation--><a:href= "url" ></a><!--full Syntax- -><button v-bind:disabled= "somedynamiccondition" >Button</button><!--abbreviation--><button: Disabled= "Somedynamiccondition" >Button</button>

v-onAbbreviation

<!--full syntax--><a v-on:click= "dosomething" ></a><!--abbreviation--><a @click = "DoSomething" ></a >

They look a bit different from "legit" HTML, but they can be parsed correctly in all vue.js supported browsers and will not appear in the final rendered markup. The abbreviation syntax is completely optional, but you'll be glad to have them as you step into your learning.

Vue Data binding syntax