Vue.js using HTML-based template syntax that allows developers to declaratively bind to the DOM of the underlying data Vue instance.
All Vue.js templates are legitimate HTML, so can follow the standard browser and HTML parser.
On the underlying implementation, Vue will be compiled into a virtual template DOM rendering functions. Binding response system,
Vue intelligently calculate the minimum number of components need to re-render, and to minimize the number of operations DOM.
If you are familiar with the raw power of a virtual DOM and JavaScript prefer, you can also do not have the template, write directly rendering (render) function , using the optional JSX syntax.
text
<span>Message: {{ msg }}</span>
The data objects bound msgproperty is changed, the content will be updated at the interpolation.
<Span v-once> This will not change: {{msg}} </ span>
By using the v-once instruction , you can perform a one-time interpolation, when the data changes, the content is not updated at the interpolation. Other data on the node to affect binding
Original HTML
Curly brackets will interpret the data as plain text rather than HTML code. In order to output true HTML, you need to use the v-htmlcommand:
characteristic
Mustache grammar can not act on HTML attributes, in which case you should use v-bind command:
<button v-bind:disabled="isButtonDisabled">Button</button>
If the isButtonDisabled values are , or , the characteristic will not even be included in the rendered elements. nullundefinedfalsedisabled <button>
Use JavaScript Expressions
instruction
Command (Directives) is having special characteristics prefix . Characteristic value of the expected single instruction JavaScript expression ( The exception is v-v-for
<the p-V- IF = " Seen " > Now you see me </ p>
Here, v-if the instruction according to the expression seen value is to insert / remove the authenticity <p> element .
parameter
Some instructions capable of receiving a "parameter", represented by the colon after the instruction name. For example, v-bind instructions may be used to update the HTML responsive characteristics:
<a v-bind:href="url">...</a>
Here href are parameters, informing v-bind the instruction of the elements href characteristic of the expression url values of binding.
<a v-on:click="doSomething">...</a>
Dynamic parameters
<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
对动态参数的值的约束
动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
对动态参数表达式的约束
动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：
修饰符
缩写
