The template is implemented based on DOM. This means that all templates are parsable and valid HTML, and are enhanced by some special features. Vue templates are therefore fundamentally different from string-based templates, keep this in mind.
Interpolation
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 value of the msg property of the corresponding data object. It will also be updated whenever this property changes.
You can also only process a single interpolation, and future data changes will no longer cause interpolation updates:
<span>This will never change: {{* msg }}</span>
Original HTML
The double Mustache tag parses the data into plain text instead of HTML. In order to output real HTML strings, three Mustache tags are needed:
<div>{{{ raw_html }}}</div>
Content is inserted as HTML strings - data binding will be ignored. If you need to reuse template fragments, partials should be used.
Dynamically rendering arbitrary HTML on a website is very dangerous because it can easily lead to [XSS attacks](/wiki/Cross-site_scripting). Remember to use HTML interpolation only for trusted content and never for user-submitted content.
HTML Features
Mustache tags can also be used in HTML attributes:
<div ></div>
Note that interpolation cannot be used within instructions and special features. Don't worry, if the Mustache tag is used in the wrong place, a warning will be given.
Bind expression
Text placed in the Mustache tag is called a binding expression. In , a bound expression consists of a simple JavaScript expression and optionally one or more filters.
JavaScript expressions
So far, our templates are bound to only simple attribute keys. However, in fact, it supports full-featured JavaScript expressions within data binding:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ ('').reverse().join('') }}
These expressions will be evaluated within the scope of the Vue instance to which they belong. One limitation 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 also not possible, you can use ternary expressions instead -->
{{ if (ok) { return message } }}
Filter
Allows the addition of optional "Filter" after an expression, indicating with "pipeline character":
{{ message | capitalize }}
Here we will use the value of the expression message to the built-in capitalize filter. This filter is actually just a JavaScript function that returns the capitalized value. Several built-in filters are provided, and later we will talk about how to develop our own filters.
Note that pipe syntax is not JavaScript syntax, so filters cannot be used within expressions and can only be added after expressions.
The filters can be connected in series:
{{ message | filterA | filterB }}
The filter can also accept parameters:
{{ message | filterA 'arg1' arg2 }}
The filter function always takes the value of the expression as the first parameter. Quoted arguments are treated as strings, while non-quoted arguments are calculated as expressions. Here, the string 'arg1' is passed to the filter as the second parameter, and the value of the expression arg2 is calculated as the third parameter.
instruction
Directives are special features with the prefix v- . The value of the directive is limited to a binding expression, so the JavaScript expression and filter rules mentioned above are also applicable here. The responsibility of an instruction is to apply certain special behaviors to the DOM when the value of its expression changes. Let's look back and forth at the example in "Overview":
<p v-if="greeting">Hello!</p>
Here the v-if directive deletes/inserts the <p> element according to the authenticity of the expression greeting value.
parameter
Some instructions can be separated by an "argument" after its name and a colon in the middle. For example, the v-bind directive is used to responsively update HTML features:
<a v-bind:href="url"></a>
Here href is a parameter, which tells the v-bind directive to bind the href attribute of the element to the value of the expression url. Maybe you have noticed that you can use feature interpolation {% raw %}href="{{url}}"{% endraw %} to get the same result: this is correct, and in fact, internal feature interpolation will be converted to v-bind binding.
Another example is the v-on directive, which is used to listen for DOM events:
<a v-on:click="doSomething">
This parameter is the name of the event being listened to. We will also explain event binding in detail.
Modifier
Modifiers are special suffixes starting with half-width periods. They are used to indicate that the instructions should be bound in a special way. For example, the .literal modifier tells the directive to parse its value into a literal string instead of an expression:
<a v-bind:="/a/b/c"></a>
Of course, this doesn't seem to make sense, because we just need to use href="/a/b/c" without having to use a single instruction. This example is just to demonstrate the syntax. Later we will see more practical usages of modifiers.
abbreviation
The v- prefix is a visual hint that identifies a specific Vue feature in a template. These prefixes can be a good distinction when you need to add dynamic behavior to some existing HTML code. But when you use some common instructions, you will feel that it is too realistic and long-winded. And when building a single page application (SPA), all templates are managed, and the v- prefix is not that important at this time. Therefore, special abbreviations are provided for the two most commonly used instructions v-bind and v-on:
v-bind abbreviation
<!-- 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>
v-on abbreviation
<!-- Complete syntax --> <a v-on:click="doSomething"></a> <!-- abbreviation --> <a @click="doSomething"></a>
They look a little different from "legal" HTML, but they are correctly parsed in all supported browsers and do not appear in the final rendered tag. Abbreviation grammar is completely optional, but as you learn step by step, you will be glad to have them.
This article has been compiled intoFront-end component learning tutorial》, everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.