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 .

©2020 ioDraw All rights reserved
Using genetic algorithm to solve function optimization problem ( Single target )CLion Novice step on the pit :CMake project is not loaded Google says home office affects work efficiency !2021 Return to offline office in 2010 Data analysis interview experience ( Give yourself a process of carding )C Language implementation of simple minesweeping ( It's all dry goods , Novice Xiaobai must see )Python Basic knowledge !!C Language implementation of minesweeping game Valentine's Day , rose , The one in your heart ~ Operation and maintenance work Python Painting cherry blossoms