VUE template syntax – detailed interpolation

The most common form of data binding is to use the text interpolation of the ‘Mustache’ syntax (double parentheses):

Use the V-ONCE instruction, can also perform a one-time interpolation, when the main sentence changes The contents of the interpolation will not be updated.

But please pay attention to this to affect all the data bindings on the node:

this will NVER CHANGE: {{message}}
   2. Pure HTML   
Double parenthesis will explain the data as plain text, not HTML. In order to output HTML, V-HTML instructions can be used:

is inserted Being an HTML — data binding will be ignored. Note that you cannot use V-HTML to

, because VUE is not a string-based template engine. Components are more suitable for single UI reuse and composite basic units. Any HTML that is dynamically rendered on site may be very dangerous because it will easily lead to XSS attacks.
  Use only HTML interpolation on trusted content, never interpolation provided by the user. 
3. Properties
MUSTACHE cannot be used in the HTML attribute, should use V-BIND instructions;

This is also effective for the properties of the Boolean value – if the condition is requestedThe value is removed

4 . Using JavaScript expression
So far, we have always bound the simple properties key value in our template. But in fact, for all data bindings of

, Vue.js provides full JavaScript expression support

  {{Nunber + 1} } {{ok? 'yes':' NO '}} {{message.split (' '). Reverse (). Join (')}}   

These expressions will be parsed as oh JavaScript in the data scope of the Vue instance. Each restriction is that each binding can only contain a single expression, so it will not take effect below

// This sentence is not a statement Expression {{var A = 1}} // flow control does not take effect, please use trune expressions {{if ({return message}}
The template expression is placed in the sandbox, only a white list of global variables, such as Math and Date.
Do not try to access user-defined global variables in template expressions
above is the VUE template syntax introduced to you – detailed explanation, I hope to help everyone If everyone has any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment