Esto es lo que necesita saber sobre el enlace de datos en Vue

La vinculación de datos en aplicaciones web crea un vínculo entre la instancia de la aplicación y la IU (interfaz de usuario). La instancia de la aplicación administra los datos, el comportamiento y los componentes, mientras que la interfaz de usuario representa el aspecto visual con el que interactúan los usuarios. La vinculación de datos le permite crear aplicaciones web dinámicas.

Aquí, explorará varios enlaces en Vue, incluidos enlaces unidireccionales y bidireccionales. También aprenderá a implementar estos enlaces con plantillas y directivas de bigote como v-bind y v-model.

Interpolación en Vue

La interpolación es uno de los tipos de enlace de datos más populares de Vue. La interpolación le permite mostrar valores de datos en sus etiquetas de Lenguaje de marcado de hipertexto (HTML) con la plantilla de bigote, popularmente indicada con llaves dobles ({{ }}).

Con la plantilla de bigote, puede integrar contenido dinámico de la aplicación, como propiedades de datos y métodos, en su HTML. Puede lograr esto adjuntando nombres de propiedades de datos o métodos del

objeto de opciones en Vue dentro de estas llaves.

Aquí hay una instancia de una aplicación Vue que utiliza la plantilla de bigote para lograr la interpolación en Vue:

<cuerpo>
<divisiónidentificación="aplicación">
<h1>{{ título }}h1>
<pag>{{ texto.toUpperCase() }}pag>
división>
<guion>
 const app = Vue.createApp({
 datos() {
 devolver {
 título: "Bienvenido",
 texto: "¿Este es tu mundo?",
 };
 },
 });
 aplicación.mount("#aplicación");
guion>
cuerpo>

El bloque de código anterior usa la plantilla de bigote para mostrar el valor de la propiedad del título en el objeto de datos de la aplicación Vue. También puede mostrar resultados de expresiones de JavaScript con interpolación. por ejemplo, el {{texto.toUpperCase()}} expresión en la pag La etiqueta muestra la versión en mayúsculas del valor del texto, como se muestra en la siguiente imagen:

Cuando monta una aplicación Vue, Vue evalúa las expresiones en las plantillas y representa los valores resultantes en el cuerpo HTML. Cualquier cambio en las propiedades de los datos actualiza los valores correspondientes en la interfaz de usuario.

Por ejemplo:

<guion>
 const app = Vue.createApp({
 datos() {
 devolver {
 título: "Hola",
 texto: "¿Este es tu mundo?",
 };
 },
 });
 aplicación.mount("#aplicación");
guion>

El bloque de código anterior cambia la propiedad del título a "Hola". Este cambio se reflejará automáticamente en la interfaz de usuario, ya que la aplicación Vue vincula la propiedad del título al elemento de la interfaz de usuario, como se muestra a continuación:

La interpolación solo genera datos cuando los corchetes dobles se encuentran entre abrir y cerrar etiquetas HTML.

Enlace de datos unidireccional con la directiva v-bind

Al igual que la interpolación, el enlace de datos unidireccional vincula la instancia de la aplicación con la interfaz de usuario. La diferencia es que vincula propiedades como datos y métodos a atributos HTML.

El enlace de datos unidireccional admite el flujo unidireccional de datos, lo que evita que los usuarios realicen cambios que afecten las propiedades de los datos en la instancia de la aplicación. Esto es útil cuando desea mostrar datos al usuario de la aplicación pero evitar que el usuario los modifique.

Puede lograr el enlace de datos unidireccional en Vue con el unión en v directiva o su carácter abreviado (:):

 la directiva v-bind 
<aportetipo="texto"enlace v: valor="texto">
 el: carácter abreviado 
<aportetipo="texto":valor="texto">

El bloque de código muestra el uso de la directiva v-bind y su abreviatura para vincular el valor de la etiqueta HTML de entrada a una propiedad de datos de texto. Aquí hay un ejemplo de una aplicación Vue que utiliza el unión en v Directiva para lograr el enlace de datos unidireccional:

<cuerpo>
<divisiónidentificación="aplicación">
<aportetipo="texto"enlace v: valor="texto">
<pag>{{ texto }}pag>
división>
<guion>
 const app = Vue.createApp({
 datos() {
 devolver {
 texto: '¡Vue es genial!'
 }
 }
 })
 aplicación.mount('#aplicación')
guion>
cuerpo>

Arriba, un campo de entrada y un elemento de párrafo muestran el valor del texto propiedad. El valor El atributo del campo de entrada está vinculado a la propiedad de texto usando el unión en v directiva.

Este bloque de código crea un enlace unidireccional, donde los cambios en el texto propiedad actualizará el valor del campo de entrada, pero los cambios realizados en el campo de entrada no actualizarán el texto propiedad en la instancia de la aplicación Vue.

Para mostrar esto, podemos comenzar con el valor inicial de la texto propiedad, "¡Vue es increíble!”:

Después de cambiar el valor del campo de entrada a "¡Hola Mundo!", observe que la aplicación Vue no se actualizó y el texto en la etiqueta del párrafo permaneció igual:

Sin embargo, cuando cambiamos el valor de la texto propiedad a ¡Hola Mundo! en la instancia de la aplicación Vue en lugar del campo de entrada, el campo de entrada se actualiza para reflejar el nuevo valor:

Esta forma de vincular datos es útil en escenarios en los que desea mostrar datos al usuario pero evitar que el usuario los modifique directamente. Aprovechando v-bind en Vue.js, puede establecer un enlace unidireccional, conectando fácilmente los datos de su aplicación a los elementos de la interfaz de usuario.

Enlace de datos bidireccional con la directiva v-model

El enlace de datos bidireccional permite que los cambios en el valor de un elemento de la interfaz de usuario se reflejen automáticamente en el modelo de datos subyacente y viceversa. La mayoría de front-end Marcos de JavaScript como Angular utiliza enlace bidireccional para compartir datos y manejar eventos en tiempo real.

Vue.js hace posible el enlace bidireccional con el modelo v directiva. El modelo v La directiva crea un enlace de datos bidireccional entre un elemento de entrada de formulario y una propiedad de datos. Cuando escribe en un elemento de entrada, el valor se actualiza automáticamente en la propiedad de datos y cualquier cambio en la propiedad de datos también actualizará el elemento de entrada.

Aquí hay un ejemplo de una aplicación Vue que utiliza el modelo v Directiva para lograr el enlace de datos bidireccional:

<cabeza>
<título>Enlace de datos bidireccional en Vuetítulo>
<guionorigen=" https://unpkg.com/vue@3/dist/vue.global.js">guion>
cabeza>
<cuerpo>
<divisiónidentificación="aplicación">
<aportetipo="texto"modelo v="texto">
<pag>{{ texto }}pag>
división>
<guion>
 const app = Vue.createApp({
 datos() {
 devolver {
 texto: '¡Vue es genial!'
 }
 }
 })
 aplicación.mount('#aplicación')
guion>
cuerpo>

El bloque de código anterior tiene un elemento de entrada con el modelo v directiva que lo vincula a la texto propiedad de datos. El texto la propiedad se establece inicialmente en "¡Vue es increíble!".

El campo de entrada actualiza la propiedad del texto cuando escribe en él y refleja los cambios en la propiedad del texto en el pag etiqueta. Vue.js usa la directiva v-model y el elemento de entrada para lograr un enlace de datos bidireccional.

Mientras que v-bind permite la comunicación unidireccional desde la aplicación Vue a la interfaz de usuario, v-model proporciona comunicación bidireccional entre la aplicación Vue y la interfaz de usuario. Debido a su capacidad para permitir la comunicación bidireccional, modelo v se usa a menudo cuando se trabaja con elementos de formulario en Vue.

Amplíe su experiencia en la creación de aplicaciones Vue

Aprendió sobre el enlace de datos en Vue, incluida la interpolación y las directivas v-bind y v-model. Estos enlaces de datos son esenciales, ya que sirven como base de las aplicaciones de Vue.

Vue tiene muchas otras directivas para casos de uso, como la representación de listas, el enlace de eventos y la representación condicional. Comprender las directivas de Vue lo ayuda a crear un front-end dinámico e interactivo para sus aplicaciones web.