La sintaxis de la plantilla
Vue.js usando la sintaxis de plantilla basada en HTML que permite a los desarrolladores de forma declarativa se unen a la DOM de los datos de instancia Vue subyacente. todas las plantillas HTML Vue.js son legítimas, por lo que puede seguir el navegador estándar y HTML analizador.
En la implementación subyacente, Vue se compila en un virtual funciones de representación DOM plantilla. Encuadernación sistema de respuesta, podemos calcular de forma inteligente Vue re-renderizado requiere un número mínimo de componentes, el número de operaciones y minimizar el DOM.
interpolación
texto
Enlace de datos La forma más común es el uso de la sintaxis "bigote" (corchetes) Texto de interpolación:
<span>Message: {{ msg }}</span>
Bigote etiqueta será reemplazado en el objeto de datos correspondiente msgatributo. Siempre que los objetos de datos enlazado msgpropiedad se cambia, el contenido se actualizará en la interpolación.
Mediante el uso de la v de una sola instrucción , puede realizar una interpolación de una sola vez, cuando cambian los datos, el contenido no se actualiza en la interpolación. Pero, por favor preste atención esto afectará a otros que vinculen al nodo de datos:
<span v-once>这个将不会改变: {{ msg }}</span>
Atributo
Bigote gramática no puede actuar sobre el atributo HTML, en cuyo caso se debe utilizar v-bindla instrucción :
<div v-bind:id="dynamicId"></div>
Para atributo booleano (lo que significa que siempre que hay true), v-bindtrabajando juntos es ligeramente diferente, en este ejemplo:
<button v-bind:disabled="isButtonDisabled">Button</button>
Si los
isButtonDisabledvalores sonnull,undefinedofalse, eldisabledatributo ni siquiera se incluye en la prestados elemento ``.
El uso de JavaScript Expresiones
De hecho, para la unión de todos los datos, Vue.js proporciona soporte completo expresión de JavaScript.
{{ number + 1 }}
<!-- 这是语句，不是表达式所以下面这句不生效上面的生效 -->
{{ var a = 1 }}
{{ ok ? 'YES' : 'NO' }}
//下面这个流程控制不会生效，只有上面的三元运算符才生效
{{ if (ok) { return message } }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
instrucción
Comando (Directivas) con un v-prefijo especial atributo. El valor esperado del atributo de instrucción es una sola expresión de JavaScript ( v-forson excepciones, se discute más adelante). instrucción de servicio que también afectan cuando el valor de la expresión, que se produce en respuesta DOM actuar. Recordando el ejemplo que vimos en la introducción:
<p v-if="seen">现在你看到我了</p>
En este caso, v-ifla instrucción de acuerdo a la expresión seenla inserción / extracción del elemento de `` valor de verdad.
- parámetros
Algunas instrucciones capaces de recibir un "parámetro", representados por los dos puntos después del nombre de instrucciones. Por ejemplo, v-bindlas instrucciones pueden ser utilizados responsablemente atributo actualización de HTML:
<a v-bind:href="url">...</a>
Aquí hrefson parámetros, informando v-bindel elemento de instrucción en el hrefatributo de la expresión urlvalores de unión.
Otro ejemplo es el v-oncomando, que se utiliza para detectar eventos DOM:
<a v-on:click="doSomething">...</a>
Aquí el argumento es el nombre del supervisor de sucesos.
- Los parámetros dinámicos
2.6.0 Nueva
2.6.0 Desde el principio, el uso de corchetes en la expresión JavaScript como un parámetro de un comando:
<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>
Aquí attributeNamees una expresión JavaScript como la evaluación dinámica, valor obtenido se usa como argumento final. Por ejemplo, si tiene una instancia de Vue dataatributo attributeNamecuyo valor "href", entonces esto sería equivalente a la unión v-bind:href.
Del mismo modo, puede utilizar los parámetros dinámicos de un controlador de eventos vinculaciones de nombres dinámico:
<a v-on:[eventName]="doSomething"> ... </a>
En este ejemplo, cuando eventNameel valor del "focus"tiempo, v-on:[eventName]sería equivalente a v-on:focus.
Las restricciones en los valores de parámetros dinámicos
Se espera que una serie de parámetros dinámicos que se determine, el valor de la anomalía null. Este especial nullvalor se puede utilizar de forma explícita para eliminar la unión. Cualquier valor de otros tipos que no son cadenas son disparará una advertencia.
Las limitaciones de expresión dinámica
sintaxis de la expresión parámetro dinámico tiene algunas limitaciones, debido a que ciertos caracteres, como espacios y comillas, colocados en nombre del atributo HTML es válido. Por ejemplo:
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
El enfoque alternativo es utilizar una expresión sin espacios ni comillas, o reemplazar este complejo expresiones con propiedades aritméticas.
Cuando el DOM utilizando una plantilla (plantilla escrito directamente en un archivo HTML), también hay que evitar el uso de mayúsculas caracteres para nombrar el nombre de la clave, ya que el navegador nombres de atributos toda forzados a minúsculas:
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
abreviatura
v-Prefijo como una señal visual para identificar la plantilla atributo específico Vue. Cuando se utiliza Vue.js añadir comportamiento dinámico (comportamiento dinámico) para la etiqueta existente v-prefijo útil, sin embargo, para se utiliza con frecuencia una cierta instrucción, se sentirá incómodo para su uso. Mientras tanto, en la construcción de la Vue gestionar todas las plantillas de la aplicación de una sola página (SPA - aplicación de una sola página) , el v-prefijo se ha vuelto menos importante.
Por lo tanto, para el Vue v-bindy v-onlas dos instrucciones de uso más frecuente, que ofrece se utilizan abreviaturas específicas:
abreviatura V-bind
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
V-en abreviaturas
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>