La plantilla de Vue.js se implementa en base a DOM. Esto significa que todas las plantillas Vue.js son HTML analizables y válidas, y son mejoradas por algunas características especiales. Por lo tanto, las plantillas VUE son fundamentalmente diferentes de las plantillas basadas en cadenas, tenlo en cuenta.
Interpolación
texto
La forma más básica de enlace de datos es la interpolación de texto, utilizando la sintaxis "bigote" (aparatos dobles):
<span> mensaje: {{msg}} </span>
La etiqueta del bigote se reemplaza por el valor del atributo MSG del objeto de datos correspondiente. También se actualizará cada vez que cambie esta propiedad.
También solo puede procesar una única interpolación, y los cambios de datos futuros ya no causarán actualizaciones de interpolación:
<span> Esto nunca cambiará: {{* msg}} </span>
HTML original
La etiqueta de bigote dual analiza los datos en texto plano en lugar de HTML. Para obtener cadenas HTML reales, debe usar tres etiquetas de bigote:
<Div> {{{raw_html}}} </div>
Los contenidos se insertan como cadenas HTML: se ignorará el enlace de datos. Si necesita reutilizar fragmentos de plantilla, se deben usar parciales.
Es muy peligroso representar dinámicamente HTML arbitraria en un sitio web porque es propenso a [XSS Attack] (https://en.wikipedia.org/wiki/cross-site_scripting). Recuerde usar la interpolación HTML solo para contenido confiable y nunca para contenido enviado por el usuario.
Características de HTML
Las etiquetas de bigote también se pueden usar en atributos HTML:
<div id = "item-{{id}}"> </div>
Tenga en cuenta que la interpolación no se puede usar dentro de las directivas Vue.js y las características especiales. No se preocupe, si la etiqueta de bigote se usa en el lugar equivocado, Vue.js dará una advertencia.
Unir la expresión
El texto colocado en la etiqueta del bigote se llama expresión de unión. En Vue.js, una expresión unida consiste en una expresión simple de JavaScript y opcionalmente uno o más filtros.
Expresiones de JavaScript
Hasta ahora, nuestras plantillas están obligadas a solo teclas de atributo simples. Sin embargo, de hecho, Vue.js admite expresiones de JavaScript con todas las funciones en el enlace de datos:
{{número + 1}}
{{ OK ? 'Sí': 'no'}}
{{Message.split (''). Reverse (). Join ('')}}
Estas expresiones se evalúan dentro del alcance de la instancia de Vue a la que pertenecen. Una limitación es que cada enlace solo puede contener una sola expresión, por lo que la siguiente declaración no es válida:
<!-Esta es una declaración, no una expresión:->
{{var a = 1}}
<!-El control de procesos tampoco es posible, puede usar expresiones ternarias en su lugar->
{{if (ok) {Mensaje de retorno}}}
Filtrar
Vue.js permite la adición de "filtro" opcional después de una expresión, que indica con "carácter de tubería":
{{mensaje | capitalizar}}
Aquí usaremos el valor del mensaje de expresión "tubería" al filtro de capitalización incorporado. Este filtro es en realidad solo una función JavaScript que devuelve el valor capitalizado. Vue.js proporciona varios filtros incorporados, y hablaremos sobre cómo desarrollar nuestros propios filtros más adelante.
Tenga en cuenta que la sintaxis de la tubería no es la sintaxis de JavaScript, por lo que los filtros no se pueden usar dentro de las expresiones y solo se pueden agregar a la ocurrencia posterior de la expresión.
Los filtros se pueden conectar en serie:
{{mensaje | FilterA | FilterB}}
El filtro también puede aceptar parámetros:
{{mensaje | filtera 'arg1' arg2}}
La función de filtro siempre toma el valor de la expresión como el primer parámetro. Los argumentos citados se tratan como cadenas, mientras que los argumentos no cotizados se calculan como expresiones. Aquí, la cadena 'Arg1' se pasa al filtro como el segundo parámetro, y el valor de la expresión Arg2 se calcula como el tercer parámetro.
instrucción
Las directivas son características especiales con el prefijo V-. El valor de la directiva se limita a una expresión de unión, por lo que las reglas de expresión y filtro de JavaScript mencionadas anteriormente también son aplicables aquí. La responsabilidad de una instrucción es aplicar ciertos comportamientos especiales al DOM cuando cambia el valor de su expresión. Veamos de un lado a otro en el ejemplo de "Descripción general":
<p v- if = "saludo"> ¡Hola! </p>
Aquí la Directiva V-IF eliminará/insertará el elemento <p> de acuerdo con la autenticidad del valor de saludo de expresión.
parámetro
Algunas instrucciones pueden separarse mediante un "argumento" después de su nombre y un colon en el medio. Por ejemplo, la Directiva de Bind V se utiliza para actualizar de manera receptiva las funciones de HTML:
<a v-bind: href = "url"> </a>
Aquí HREF es un parámetro, que le dice a la Directiva de unión V que une el atributo HREF del elemento al valor de la URL de expresión. Tal vez haya notado que puede usar la interpolación de características { % RAW %} href = "{{URL}}" { % endraw %} para obtener el mismo resultado: esto es correcto y, de hecho, la interpolación de características interna se convertirá en vinculación de enlace V.
Otro ejemplo es la Directiva V-ON, que se usa para escuchar eventos DOM:
<a v-on: click = "dosomething">
Este parámetro es el nombre del evento que se escucha. También explicaremos la vinculación del evento en detalle.
Modificador
Los modificadores son sufijos especiales que comienzan con períodos de medio ancho. Se utilizan para indicar que las instrucciones deben estar vinculadas de manera especial. Por ejemplo, el modificador .literal le dice a la directiva que analice su valor en una cadena literal en lugar de una expresión:
<a v-bind: href.literal = "/a/b/c"> </a>
Por supuesto, esto no parece tener sentido, porque solo necesitamos usar href = "/a/b/c" sin tener que usar una sola instrucción. Este ejemplo es solo para demostrar la sintaxis. Más tarde veremos más usos prácticos de modificadores.
abreviatura
El V-prefix es una pista visual que identifica una característica VUE específica en una plantilla. Estos prefijos pueden ser una buena distinción cuando necesita agregar un comportamiento dinámico a algún código HTML existente. Pero cuando use algunas instrucciones comunes, sentirá que siempre es tan realista y detallada. Y al construir una sola aplicación de página (SPA), Vue.js administrará todas las plantillas, y el prefijo V no es tan importante en este momento. Por lo tanto, Vue.js proporciona abreviaturas especiales para las dos directivas más utilizadas en V y V-ON:
abreviatura de unión a V
<!-Complete Syntax-> <a v-bind: href = "url"> </a> <!-abreviation-> <a: href = "url"> </a> <!-Complete sintaxis-> <botón v-bind: desactivado = "somedynamiccondition"> botón </boton> <!-abreviation-> <botte: desactived = "somedynamiccondition" button "
abreviatura V-on
<
Se ven un poco diferentes de HTML "legal", pero se analizan correctamente en todos los navegadores habilitados para Vue.js y no aparecen en la etiqueta renderizada final. La gramática de la abreviatura es completamente opcional, pero a medida que aprende paso a paso, estará encantado de tenerlos.
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.