The template syntax
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, we can calculate Vue intelligently re-rendering requires a minimum number components, number of operations and minimize the DOM.
Interpolation
text
Data Binding The most common form is the use of "Mustache" syntax (curly brackets) Text Interpolation:
<span>Message: {{ msg }}</span>
Mustache tag will be replaced on the corresponding data object msgattribute. Whenever the data objects bound msgproperty is changed, the content will be updated at the interpolation.
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. But please pay attention this will affect other data binding on the node:
<span v-once>这个将不会改变: {{ msg }}</span>
Attribute
Mustache grammar can not act on the HTML attribute, in which case you should use v-bindthe instruction :
<div v-bind:id="dynamicId"></div>
For Boolean attribute (which means that as long as there is true), v-bindworking together is slightly different, in this example:
<button v-bind:disabled="isButtonDisabled">Button</button>
If the
isButtonDisabledvalues arenull,undefinedorfalse, thedisabledattribute will not even be included in the rendered `` element.
Use JavaScript Expressions
In fact, for all the data binding, Vue.js provides full support JavaScript expression.
{{ number + 1 }}
<!-- 这是语句，不是表达式所以下面这句不生效上面的生效 -->
{{ var a = 1 }}
{{ ok ? 'YES' : 'NO' }}
//下面这个流程控制不会生效，只有上面的三元运算符才生效
{{ if (ok) { return message } }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
instruction
Command (Directives) with a v-special attribute prefix. The expected value of the instruction attribute is a single JavaScript expression ( v-forare exceptions, we discuss later). Duty instruction that also affect when the value of the expression, which is produced responsively acting DOM. Recalling the example we saw in the introduction:
<p v-if="seen">现在你看到我了</p>
Here, v-ifthe instruction according to the expression seento insert / remove the `` element of truth value.
- parameter
Some instructions capable of receiving a "parameter", represented by the colon after the instruction name. For example, v-bindinstructions may be used responsively update HTML attribute:
<a v-bind:href="url">...</a>
Here hrefare parameters, informing v-bindthe instruction element in the hrefattribute of the expression urlvalues of binding.
Another example is the v-oncommand, which is used to listen for DOM events:
<a v-on:click="doSomething">...</a>
Here the argument is the name of the event monitor.
- Dynamic parameters
2.6.0 New
2.6.0 From the start, using square brackets in JavaScript expression as a parameter of a command:
<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>
Here attributeNameis a JavaScript expression as the dynamic evaluation, obtained value will be used as the final argument. For example, if you have a Vue instance dataattribute attributeNamewhose value "href", then this would be equivalent to the binding v-bind:href.
Similarly, you can use the dynamic parameters of a dynamic name bindings event handler:
<a v-on:[eventName]="doSomething"> ... </a>
In this example, when eventNamethe value of "focus"time, v-on:[eventName]would be equivalent to v-on:focus.
Constraints on the dynamic parameter values
A dynamic parameter string is expected to be determined, the value of the abnormality null. This special nullvalue can be explicitly used to remove the binding. Any value other non-string types are will trigger a warning.
Constraints on dynamic expression
Dynamic parameter expression syntax has some constraints, because certain characters, such as spaces and quotation marks, placed in HTML attribute name is invalid. E.g:
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
The alternative approach is to use an expression no spaces or quotes, or replace this complex expressions with arithmetic properties.
When the DOM using a template (template written directly in an HTML file), you also need to avoid using uppercase characters to name the key name, because the browser will attribute names all forced to lower case:
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
abbreviation
v-Prefix as a visual cue for identifying template Vue specific attribute. When you use Vue.js add dynamic behavior (dynamic behavior) for existing label v-prefix helpful, however, for some instruction is frequently used, it will feel cumbersome to use. Meanwhile, in the construction of the Vue manage all templates single page application (SPA - single page application) , the v-prefix has become less important.
Thus, for the Vue v-bindand v-onthe two most frequently used instructions, it provides specific abbreviations are used:
V-bind abbreviation
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
V-on abbreviations
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>