Vue. js requires two-way data binding every day. vue. js binding

Vue. js requires two-way data binding every day. vue. js binding

The Vue. js template is implemented based on DOM. This means that all Vue. js templates are parsed and valid HTML, and are enhanced through some special features. The Vue template is fundamentally different from the string-based template. Remember this.

Interpolation

Text

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

<Span> Message :{{ msg }}</span>

The Mustache label is replaced by the msg attribute value of the corresponding data object. It is updated whenever this attribute changes.

You can also only process a single interpolation. Future data changes will no longer cause interpolation updates:

<Span> This will never change :{{ * msg }}</span>

Original HTML

The dual Mustache label parses the data into plain text instead of HTML. To output a real HTML string, three Mustache labels are required:

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

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

It is very dangerous to dynamically render arbitrary HTML on the website because it can easily cause [XSS attacks] (https://en.wikipedia.org/wiki/Cross-site_scripting ). Remember, only HTML interpolation is used for trusted content, and ** never ** is used for user-submitted content.

HTML features

The Mustache tag can also be used in HTML Attributes (Attributes:

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

Note that interpolation cannot be used in Vue. js commands and special features. Don't worry. If the Mustache label is used incorrectly, Vue. js will give a warning.

Binding expression

The text placed in the Mustache label is called a binding expression. In Vue. js, a binding expression consists of a simple JavaScript expression and one or more optional filters.

JavaScript expressions

So far, our template is only bound to a simple property key. However, Vue. js supports full-featured JavaScript expressions in Data Binding:

{Number + 1 }}

{OK? 'Yes': 'no '}}

{Message. split (''). reverse (). join ('')}}

These expressions are calculated within the scope of the Vue instance. One restriction is that each binding can only contain a single expression, so the following statement is invalid:

<! -- This is a statement, not an expression: -->
{Var a = 1 }}

<! -- Process control is not allowed. You can use a ternary expression instead. -->
{If (OK) {return message }}}

Filter

Vue. js allows you to add an optional "Filter" after the expression, which is indicated by "Pipeline:

{Message | capitalize }}

Here, the value of the expression message is "pipe" to the built-in capitalize filter. This filter is actually just a JavaScript function and returns the capitalized value. Vue. js provides several built-in filters. Later we will talk about how to develop our own filters.

Note that the pipeline syntax is not a JavaScript syntax, so you cannot use a filter in the expression and can only add it to the end of the expression.

Filters can be connected in series:

{Message | filelist | filterB }}

The filter can also accept the following parameters:

{Message | filemedia'arg1' arg2 }}

The filter function always uses the value of the expression as the first parameter. Parameters with quotation marks are treated as strings, and parameters without quotation marks are calculated by expressions. Here, the string 'arg1' is passed to the filter as the second parameter, and the value of expression arg2 is calculated as the third parameter.

Command

Directive is a special feature with a prefix v. The value of the command is limited to a binding expression. Therefore, the JavaScript expression and filter rule mentioned above also apply here. The role of a command is to apply some special actions to the DOM when the value of its expression changes. Let's look back at the example in "Overview:

<P v-if = "greeting"> Hello! </P>

Here, the v-if command deletes/inserts the <p> element based on the true or false value of the expression greeting.

Parameters

Some commands can be followed by an "parameter" (Argument), separated by a colon. For example, the v-bind command is used to update HTML features in a responsive manner:

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

Here, href is a parameter, which tells the v-bind command to bind the href feature of the element to the value of the expression url. You may have noticed that you can use feature interpolation {% raw %} href = "{url }}" {% endraw %} to get the same result: this is correct, in fact, the internal feature interpolation will be converted into v-bind binding.

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

<A v-on: click = "doSomething">

Here the parameter is the name of the event to be monitored. We will also describe event binding in detail.

Modifier

The modifier (Modifiers) is a special suffix starting with a full stop. Used to indicate that commands should be bound in a special way. For example, the. literal modifier tells the command to parse its value into a literal string rather than 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" without using a command. This example only demonstrates the syntax. Later we will see more practical usage of modifiers.

Abbreviations

The v-prefix is a visual hint that identifies the specific Vue features in the template. When you need to add dynamic behavior in some existing HTML code, these prefixes can be very effective. However, when you use some frequently-used commands, you will feel that it is really cool to write these commands all the time. When building a single-page application (SPA), Vue. js manages all the templates. At this time, the v-prefix is not that important. Therefore, Vue. js provides special abbreviations for the two most commonly used commands v-bind and v-on:

Abbreviation of v-bind

<! -- Complete Syntax --> <a v-bind: href = "url"> </a> <! -- Abbreviation --> <a: href = "url"> </a> <! -- Complete Syntax --> <button v-bind: disabled = "someDynamicCondition"> Button </button> <! -- Abbreviation --> <button: disabled = "someDynamicCondition"> Button </button>

Abbreviation of v-on

<! -- Complete Syntax --> <a v-on: click = "doSomething"> </a> <! -- Abbreviation --> <a @ click = "doSomething"> </a>

They seem a little different from "valid" HTML, but they can be correctly parsed in all Vue. js-supported browsers and won't appear in the final rendering mark. Abbreviations and syntaxes are completely optional. However, as you learn them step by step, you will be glad to have them.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.