Conceptos básicos de Vue3: sintaxis de la plantilla

Si queremos mostrar datos en una plantilla, la sintaxis más utilizada es la sintaxis "Mustache" (dobles llaves) para la interpolación de texto.

Como mencionamos en la interfaz, el objeto devuelto por los datos se agrega al sistema de respuesta de Vue, por lo que cuando los datos en los datos cambian, el contenido correspondiente se actualizará.

Por supuesto, Moustache no es solo un atributo de los datos, también puede ser una expresión de JavaScript:

El siguiente contenido es incorrecto porque es una declaración, no una expresión:

v-once se usa para especificar que un elemento o componente se representa solo una vez, por lo que cuando los datos cambian, el elemento o componente y todos sus elementos secundarios se considerarán contenido estático. Cuando los datos cambian, todos sus elementos secundarios se tratarán como contenido estático y se omitirán. Esta directiva se puede utilizar para optimizar el rendimiento.

Si se agrega a un nodo principal, todos los nodos secundarios también se representarán solo una vez:

Se utiliza para actualizar el contenido de texto del elemento, esto es equivalente a la sintaxis "Mustache", pero el La sintaxis de "bigote" es más flexible.

De forma predeterminada, si el contenido que mostramos es html en sí, Vue no lo analizará. Si queremos que Vue analice el contenido, podemos usar v-html para mostrarlo.

El efecto es el siguiente:

v-pre se utiliza para omitir el proceso de compilación del elemento y sus subelementos y mostrar el marcado original de Moustache.

Omitir nodos que no necesitan ser compilados puede acelerar la compilación.

El efecto es el siguiente:

La directiva permanecerá en el elemento hasta que la instancia del componente relevante complete la compilación.

Cuando se usa v-cloak junto con una regla CSS como [v-cloak] { display: none }, esta directiva ocultará las etiquetas Moustache no compiladas hasta que la instancia del componente esté lista para la compilación. Se utiliza principalmente para resolver el problema de parpadeo. Ahora Vue3 generalmente no tiene problemas de parpadeo.

lt; divgt; no se mostrará hasta que se complete la compilación.

La serie de directivas mencionadas anteriormente se utilizan principalmente para insertar valores en el contenido de la plantilla. Sin embargo, además de determinar dinámicamente el contenido, también queremos vincular dinámicamente ciertas propiedades. Por ejemplo, vincule dinámicamente el atributo href del elemento a y vincule dinámicamente el atributo src del elemento img.

Para vincular propiedades usamos v-bind: (abreviado como: ), que se usa para vincular dinámicamente una o más propiedades o un componente de propiedad en una expresión.

v-bind se usa para vincular uno o más valores de atributos, o pasar el valor de propiedad a otro componente (lo presentaremos más adelante cuando aprendamos componentes), luego se necesita un enlace dinámico durante el proceso de desarrollo. ¿Qué atributos? ? Hay muchos más, como enlace de imagen src, enlace de sitio web href, enlace dinámico de ciertas clases, estilos, etc.

v-bind tiene un azúcar sintáctico correspondiente, que es un método abreviado en desarrollo, generalmente usamos azúcar sintáctico porque es más conciso.

Nota: Las plantillas de plantilla Vue2 solo pueden tener un elemento raíz, mientras que las plantillas de plantilla Vue3 permiten múltiples elementos raíz.

Durante el proceso de desarrollo, a veces nuestras clases de elementos también son dinámicas. Por ejemplo: cuando los datos están en un determinado estado, la fuente se muestra en rojo; cuando los datos están en otro estado, la fuente es. mostrado en negro.

Hay dos métodos para vincular clases: sintaxis de objetos y sintaxis de matrices.

①Sintaxis del objeto: podemos pasar un objeto a través de: clase (abreviatura de v-bind: clase) para cambiar de clase dinámicamente.

②Sintaxis de matriz: podemos pasar una matriz a través de: class para aplicar una lista de clases

Podemos usar v-bind:style para vincular algunos estilos CSS en línea, esto se debe a que Necesitamos determinar dinámicamente algunos estilos en función de datos, como el color y el tamaño de un determinado párrafo.

Los nombres de las propiedades CSS se pueden nombrar usando camelCase o kebab-case (recuerde encerrarlos entre comillas).

Hay dos formas de vincular estilos: sintaxis de objeto y sintaxis de matriz.

① Sintaxis de objeto:

② Sintaxis de matriz:: La sintaxis de matriz de estilo puede aplicar múltiples objetos de estilo al mismo elemento

En algunos casos, nuestra propiedad Es posible que los nombres tampoco se arreglen.

En la sección anterior, vinculamos src, href, clase y estilo, y se corrigieron los nombres de los atributos. Si los nombres de los atributos no son fijos, podemos definirlos usando el formato :[nombre del atributo]="valor". Esta forma de vincular atributos se denomina vinculación dinámica.

Si queremos unir todas las propiedades de un objeto a todas las propiedades de un elemento, ¿cómo debemos hacerlo? Es muy simple, simplemente vinculamos un objeto usando v-bind.

Como se muestra a continuación: el objeto de información se divide en los atributos individuales del div.

Ahora que hemos vinculado el contenido y los atributos de los elementos, otra característica muy importante en el desarrollo front-end es la interacción.

En el desarrollo front-end, a menudo necesitamos interactuar con los usuarios de varias maneras. En este momento, debemos escuchar los eventos del usuario, como clics, arrastres, eventos de teclado, etc.

¿Cómo escuchar eventos en Vue? Utilice la directiva v-on. Echemos un vistazo a cómo se usa v-on:

Podemos usar v-on para monitorear clics:

v-on: click se puede escribir como @click, esto es también está escrito en azúcar sintáctico:

Por supuesto, también podemos vincular otros eventos:

Si queremos vincular múltiples eventos a un elemento. Podemos pasar un objeto:

Al definir un método para que @click lo llame, preste atención al problema de los parámetros:

Caso 1: si el método no requiere ningún objeto adicional parámetros, entonces () se puede omitir y el método se puede implementar sin parámetros e imprimir el evento.

Caso 2: Si el método necesita pasar un parámetro al mismo tiempo, el método se puede implementar sin parámetros y el evento se puede imprimir. : Si necesita pasar parámetros y eventos al mismo tiempo, puede pasar eventos a través de $event. La implementación del método debe escribir los parámetros en orden.

@keyup.enter significa que el método onEnter se llama cuando aparece la tecla Enter. Generalmente obtenemos el valor de entrada dentro del método:

En algunos casos, necesitamos condiciones. Determine si se deben representar ciertos elementos o componentes. En este momento, debemos realizar un juicio condicional.

Vue proporciona las siguientes instrucciones para realizar juicios condicionales:

Echemos un vistazo.

v-if, v-else y v-else-if se utilizan para representar un contenido según las condiciones. Solo se representarán cuando la condición sea verdadera. Estas tres instrucciones son similares a las de JavaScript. declaraciones condicionales si, si no y si no.

El principio de presentación de v-if: v-if es vago. Cuando la condición es falsa, el contenido que juzga no se presentará en absoluto o se destruirá solo cuando la condición sea verdadera. El contenido del bloque de condiciones realmente se mostrará.

Dado que v-if es una directiva, se debe agregar a un elemento, pero ¿qué pasa si queremos alternar más de un elemento?

Si usamos encapsulación div en este momento, el div se representará en la interfaz, pero no queremos representar el div. En este momento, podemos optar por usar un elemento de plantilla. se puede usar como un elemento de encapsulación invisible, v- if se puede agregar a la plantilla, pero finalmente la plantilla no se representará, similar a los bloques en los subprogramas.

El uso de v-show y v-if parece ser el mismo, y también se basan en una condición para decidir si mostrar un elemento o componente.

La primera es la diferencia de uso:

La segunda es la diferencia esencial:

¿Cómo tomar decisiones durante el desarrollo?

En el desarrollo real, a menudo obtenemos un conjunto de datos del servidor y necesitamos presentarlos. Esto requiere el uso de v-for, que es similar a un bucle for de JavaScript y puede usarse para iterar sobre un conjunto de datos.

El formato básico de v-for es "elemento en matriz", que generalmente proviene de datos o accesorios u otros medios, el elemento es el alias que le damos a cada elemento y se puede personalizar.

Sabemos que al atravesar una matriz, a menudo necesitamos obtener el índice de la matriz. Si se necesita un índice, podemos usar el formato "(elemento, índice) en la matriz" y prestar atención. al orden del elemento de elementos de la matriz en el frente, el elemento de índice está en la parte posterior.

De manera similar a v-if, puede utilizar elementos de plantilla para recorrer el contenido que contiene varios elementos.

Usamos plantillas para encapsular múltiples elementos en lugar de usar divs porque los divs se representarán y las plantillas no.

Vue encapsula métodos que cambian la matriz escuchada, por lo que también activarán actualizaciones de la vista. Estos métodos encapsulados incluyen:

Los métodos anteriores modificarán directamente la matriz original, por lo que la vista. También actualizado en consecuencia. Pero algunos métodos no reemplazan la matriz original, sino que generan una nueva matriz, como filter(), concat() y slice(). En estos métodos, podemos activar actualizaciones de vista reasignando valores, de la siguiente manera:

Cuando usamos v-for para la representación de listas, generalmente vinculamos un atributo clave a un elemento o componente.

¿Cuál es el papel de este atributo clave?

Comencemos con la explicación oficial: al comparar nodos antiguos y nuevos, el algoritmo DOM virtual de Vue utilizará el atributo clave para identificar los VNodes; si no hay una clave, Vue utilizará un algoritmo que minimiza los elementos dinámicos; E intente modificar/reutilizar elementos del mismo tipo en su lugar tanto como sea posible. Si se usa la clave, Vue reorganizará el orden de los elementos de acuerdo con el cambio de clave y reutilizará los elementos del mismo tipo en su lugar. Al usar claves, reorganiza el orden de los elementos según los cambios de clave y elimina/destruye elementos donde las claves no existen.

La explicación oficial no es fácil de entender para los principiantes, como las siguientes preguntas:

¿Qué son los nodos antiguos y los nodos nuevos, y qué es VNode?

¿Cómo intentas modificar y reutilizar cuando no tienes una clave?

Cuando hay una clave, ¿cómo reorganizarla según la clave?

Primero expliquemos el concepto de VNode:

El nombre completo de VNode es Virtual Node. De hecho, ya sea un componente o un elemento, lo que finalmente representan en Vue es un VNode.

Si no tuviéramos solo un simple div, sino un montón de elementos, formarían un árbol VNode.

Veamos un ejemplo: Este es un ejemplo de cómo insertar una f en medio de li cuando hacemos clic en el botón.

De lo que estamos seguros es que no es necesario actualizar la ul y el botón. Lo que hay que actualizar es nuestra lista li. En Vue, los nodos secundarios del mismo elemento principal no volverán a representar la lista completa porque a, b, cyd en la lista no cambian. Al manipular el DOM real, solo necesitamos insertar un li de f en el medio.

Entonces, ¿cuál es la operación real de actualizar una lista en Vue?

Vue en realidad llama a dos métodos diferentes para manejar la situación con claves y sin claves, llamando a patchKeyedChildren cuando hay una clave y llamando a patchUnkeyedChildren cuando no hay una clave.

Algoritmo de diferencia sin clave:

Veremos que el algoritmo de diferencia anterior no es muy eficiente. c y d realmente no necesitan cambiarse de ninguna manera, pero dado que f usa nuestra c, todo lo posterior debe cambiarse de una vez y agregarse al final.

Algoritmo de diferencia con valores clave:

Entonces podemos ver que Vue intenta optimizar el algoritmo de diferencia utilizando tantos valores clave como sea posible.