Vue.js Based on HTML Template syntax for , Allows developers to declaratively DOM Bind to underlying Vue Instance data . All Vue.js All the templates are legal HTML
, So it can be used by standard browsers and HTML Parser parsing .
At the bottom of the implementation ,Vue Compile template into virtual DOM Render function . Integrated response system ,Vue It can intelligently calculate the minimum number of components that need to be re rendered , And put DOM Minimize the number of operations .
If you are familiar with virtual reality DOM And I like it JavaScript The original power of , You don't have to use templates , Direct write rendering (render) function , Use the optional JSX grammar .
interpolation ：
1, When interpolation is text ：
The most common form of data binding is using “Mustache” grammar ( Double braces ) Text interpolation based on ： < span>Message: {{ msg }}</ span>
Mustache The label will be replaced by the corresponding data object msg The value of the property . whenever? , On the bound data object msg The attributes have changed , The interpolation is updated .
through the use of v-once instructions , You can also perform one-time interpolation , When the data changes , The content of the interpolation is not updated . But be aware that this affects other data bindings on that node ：< span
v-once> This will not change : {{ msg }}</ span>
2, When the interpolation is html Statement time
Double braces interpret the data as plain text , Instead of HTML code . In order to output real HTML, You need to use v-html instructions ：
< p>Using mustaches: {{ rawHtml }}</ p>
< p>Using v-html directive: < span v-html=“rawHtml”></ span>
Any dynamic rendering on your site HTML It can be very dangerous , Because it can easily lead to XSS attack . Please use only for trusted content HTML interpolation , Never use interpolation for user provided content .
instructions ：
instructions (Directives) It's with v- Special characteristics of prefix . The value of an instruction property is expected to be a single value JavaScript expression (v-for
It's an exception , We'll talk about it later ). What is the duty of the order , When the value of an expression changes , The joint and several effects will be caused by it , Acting responsively on DOM. Review the examples we saw in the introduction ：
here ,v-if The instruction will be based on the expression seen To insert the true and false values of / remove
element .
Parameters of the instruction ：
Some instructions are able to receive one “ parameter ”, The instruction name is followed by a colon . for example ,v-bind Instructions can be used to update responsively HTML characteristic ：
Here, the parameter is the name of the listening event .
The parameters of an instruction can also be dynamic ：
It can be enclosed in square brackets JavaScript Expression as an argument to an instruction ：
there attributeName Will be treated as a JavaScript Expression for dynamic evaluation , The calculated value will be used as the final parameter . for example , If your Vue
There is an example data attribute attributeName, Its value is “href”, So this binding will be equivalent to v-bind:href.
similarly , You can use dynamic parameters to bind a handler to a dynamic event name ：
similarly , When eventName The value of is “focus” Time ,v-on:[eventName] Will be equivalent to v-on:focus.
Constraints on the values of dynamic parameters ：
Dynamic parameters are expected to find a string , In case of exception, the value is null. This is special null Value can be used explicitly to remove the binding . Any other value that is not a string type will trigger a warning .
Constraints on dynamic parameter expression ：
Dynamic parameter expressions have some syntax constraints , Because some characters , For example, spaces and quotation marks , Put in HTML Invalid in attribute name . same , stay DOM You need to avoid uppercase key names when using templates in .
An alternative is to use expressions without spaces or quotation marks , Or replace this complex expression with a computed property .
Modifier ：
Modifier (modifier) It's a half width period . Specified special suffixes , Used to indicate that an instruction should be bound in a special way . for example ,.prevent Modifier tells v-on
Instruction is called for triggered events event.preventDefault()：
Instruction abbreviation ：
v- Prefix as a visual cue , Used to identify the Vue Specific characteristics . When you are using Vue.js Add dynamic behavior to existing tags (dynamic behavior)
Time ,v- Prefixes help , however , For some frequently used instructions , You'll find it cumbersome to use . meanwhile , In building by Vue Single page application that manages all templates (SPA - single
page application) Time ,v- Prefixes have become less important . therefore ,Vue by v-bind and v-on These are the two most commonly used instructions , Specific abbreviations are provided ：
They may look the same as ordinary ones HTML Slightly different , but : And @ All are legal characters for attribute names , In all support Vue
All browsers can be parsed correctly . and , They don't appear in the final rendered markup . Abbreviation syntax is completely optional , But as you learn more about what they do , You'll be glad to have them .
Technology