Tipos de enlace de datos con plantilla en Vue.js

En este artículo, veremos diferentes formas de vincular datos con la plantilla en Vue.js, además de comprender su implementación a través de los ejemplos.

Cuando deseamos utilizar nuestras variables o datos dentro de la plantilla, generalmente usamos la sintaxis de bigote (llaves dobles). Sin embargo, esto no está permitido en Vue para elementos HTML. Para usar los elementos HTML, debemos usar un enlace para conectar nuestros datos a ellos. El enlace de datos facilita el enlace de los datos a la plantilla, lo que ayuda a representar el componente de vista. Vue proporciona su propio conjunto de directivas que se utilizan para vincular dinámicamente nuestros datos a las plantillas. 

Enlace de texto: se utiliza cuando necesitamos enlazar el contenido de cualquier HTML en Vue. La sintaxis para usar el enlace de texto es usar la directiva v-text en cualquier elemento HTML y se le debe asignar una propiedad de datos. Por ejemplo, los datos dentro de la etiqueta <script> se pueden mostrar con la ayuda de la etiqueta <template> que contiene la directiva v-text que tiene el valor que se va a representar.

Ejemplo : en el siguiente ejemplo, hemos vinculado los datos que son el nombre que tiene el valor, con la directiva v-text , declarada en la etiqueta <div>.

<template>
  <div style="text-align: center;
              width: 600px">
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b> Data Binding Type </b>
  </div>
  <div v-text="name" 
       style="text-align: center">
  </div>
</template>
  
<script>
  export default {
    name: "App",
    data() {
      return {
        name: 
   "This content is redered with the help of v-text directive",
      };
    },
  };
</script>

Producción:

 

Podemos vincular nuestros datos, es decir, el nombre a la etiqueta div usando la directiva v-text para vincular dinámicamente nuestros datos al HTML de modo que cuando cambiemos el nombre a algún otro valor, los cambios se reflejen en la plantilla HTML.

Vinculación HTML: es la forma de tener algunos datos de string almacenados como cualquier HTML para usar dentro de cualquier etiqueta div. Entonces, el contenido de la etiqueta div sería según el HTML que le hemos vinculado. La sintaxis para usar el enlace HTML es usar la directiva v-html y especificarle la propiedad de datos. La directiva v-html se usa para actualizar el HTML interno de un elemento con nuestros datos. 

Ejemplo : en el siguiente ejemplo, hemos encerrado la string con la etiqueta <b>. Si usáramos v-text para vincular los datos del nombre, mostraría la salida junto con las etiquetas. Pero para aplicar realmente el elemento HTML, necesitamos v-html.

<template>
  <div style="text-align: center">
    <h1 style="color: green">GeeksforGeeks</h1>
    <b> Data Binding Type </b>
  </div>
  <br />
  <div v-html="name" 
       style="text-align: center">
 </div>
</template>
  
<script>
  export default {
    name: "App",
    data() {
      return {
        name:
"
<p>Welcome to <b>GeeksforGeeks</b> Learning. 
<br>A Computer Science portal for geeks.</p>
",
      };
    },
  };
</script>

Producción:

 

Incluso podemos enlazar el HTML a la plantilla usando la directiva v-html que aplicaría las respectivas etiquetas HTML a los datos enlazados. Incluso podemos tener etiquetas de anclaje vinculadas a los datos.

Vinculación de atributos: se utiliza para vincular dinámicamente las propiedades a los atributos. No podemos vincular atributos usando la sintaxis de bigote «{{ }}» en Vue js. Para establecer el valor de los atributos usando nuestros datos, necesitamos usar la directiva v-bind . La sintaxis para el enlace de atributos usa v-bind: y luego sigue con los atributos respectivos. 

Nota: Los atributos que se vincularán mediante v-bind: deben declararse en la declaración de devolución de datos; de lo contrario, arrojará un error.

Ejemplo : en el siguiente ejemplo, hemos vinculado la propiedad disabled a la etiqueta del botón, disabled especifica que no se puede hacer clic en el botón y no se puede usar. Lo hemos vinculado a la propiedad de datos isDisabled , que es un valor booleano, establecido como verdadero. Por lo tanto, podemos usar el enlace de atributos para tener un botón de envío deshabilitado hasta que un formulario en particular esté completamente lleno y alternar la propiedad de datos para habilitarlo nuevamente al completar el formulario.

<template>
  <div style="text-align: center">
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b> Data Binding Type </b>
  </div>
  <br />
  <div style="text-align: center">
    <p>Subscribe to GBlog Channel</p>
    <button v-bind:disabled="isDisabled">
      Subscribe
    </button>
  </div>
</template>
  
<script>
  export default {
    name: "App",
    data() {
      return {
        isDisabled: true,
      };
    },
  };
</script>

Producción:

 

Podemos vincular los atributos de los elementos HTML utilizando la directiva v-bind que aplicaría dinámicamente las propiedades a los elementos HTML respectivos. Por ejemplo, podemos vincular el atributo deshabilitado a los datos llamados isDisabled para alternar el estado del botón.

Vinculación de clases: al igual que la vinculación de atributos, podemos vincular las clases utilizadas para CSS a valores de datos mediante la vinculación de clases. A cualquier etiqueta HTML se le pueden asignar nombres de clase mediante la directiva v-bind:class . La sintaxis es usar v-bind: seguido de class y establecer el valor en cualquier variable de datos. Podemos tener múltiples clases agregando a una array ( v-bind:class = ” [estado, promovido] “) que aplicará ambas clases CSS a la etiqueta HTML. Al vincular las clases a los datos, podemos cambiar mediante programación la interfaz de usuario en función de eventos como cambiar el color de fondo de cualquier botón al hacer clic en él para que la interfaz de usuario sea interactiva. Para tener clases condicionales, podemos tener cualquier valor booleano seguido de && para tener la funcionalidad de configurar la clase en función de algunas declaraciones condicionales.

Ejemplo : en el siguiente ejemplo, hemos establecido condicionalmente la clase de una etiqueta <h2> con isCondition seguido de && donde isCondition es verdadero como se declara en los datos, por lo que la clase que está entre comillas (promovida) se aplicará a < etiqueta h2> (Hemos definido la clase promocionada en los estilos).

Nota: Las clases deben declararse en la etiqueta de estilos en el archivo Vue. 

<template>
  <h2 v-bind:class="status">Status</h2>
  <h2 v-bind:class="isCondition && 'promoted'">
    Condition
  </h2>
</template>
  
<script>
  export default {
    name: "App",
    data() {
      return {
        status: "danger",
        isCondition: "true",
      };
    },
  };
</script>
  
<style scoped>
  .danger {
    color: red;
  }
  
  .promoted {
    font-style: italic;
  }
</style>

Producción:

Podemos vincular dinámicamente las clases para el HTML utilizando la directiva v-bind y cambiar las clases en función de algunas funciones o eventos. Las clases condicionales también se pueden usar usando && junto con una variable de datos booleana.

Enlace de estilos: al igual que los selectores de CSS, podemos tener los mismos estilos para diferentes elementos HTML con la ayuda del enlace de estilos e incluso cambiar los estilos dinámicamente cuando sea necesario. Como sabemos, para los estilos, tenemos 2 opciones, ya sea tener estilos en línea o definirlos en la etiqueta de estilo, pero también podemos vincular los estilos a nuestros valores de datos usando el enlace Estilos. La sintaxis para el enlace de estilos es v-bind: seguido de estilo y establezca el estilo en valores en nuestra sección de datos. En el caso de Inline Styling, podemos tener diferentes valores de datos y configurarlos como lo hacemos en HTML normal. La principal ventaja del enlace de estilo es que podemos cambiar los datos mediante programación, lo que a su vez cambiaría los estilos aplicados, ya que podemos cambiar el estilo de cualquier clase o ID de forma dinámica.

Ejemplo : en el siguiente ejemplo, configuramos el estilo de la etiqueta <h2> con propiedades CSS vinculadas con nuestros datos (color vinculado con someColor que tiene un valor de naranja, font-size vinculado con headerSize que tiene un valor de 25). Incluso podemos crear un objeto de datos con claves como propiedades y valores CSS como se muestra en la etiqueta <h2> donde vinculamos el estilo con dataStyle que a su vez es un objeto que tiene propiedades de color, tamaño de fuente y relleno.

<template>
  <h2
    v-bind:style="{
      color: someColor,
      'font-size': headerSize + 'px',
    }" >
    Inline Styles
  </h2>
  <h2 v-bind:style="dataStyle">Data Style</h2>
</template>
  
<script>
  export default {
    name: "App",
    data() {
      return {
        someColor: "orange",
        headerSize: 25,
        dataStyle: {
          color: "orange",
          fontSize: "50px",
          padding: "20px",
        },
      };
    },
  };
</script>

Producción:

También podemos aplicar estilos en línea usando el enlace v-bind para vincular dinámicamente los datos junto con cualquier valor estático a nuestros estilos y cambiarlos de acuerdo con cualquier función o algoritmo. Cree objetos de estilos en los datos y vincúlelos a cualquier elemento HTML para reducir la escritura de estilos una y otra vez para cada elemento. Si queremos separar estilos para diferentes objetos de datos, aplique varios objetos insertándolos dentro de corchetes [] o arrays.

Como podemos ver en lo anterior, siempre que queramos vincularnos a cualquier atributo HTML, debemos usar v-bind: para hacerlo (por ejemplo , v-bind:class , v-bind:id , v-bind: style , etc.) que puede volverse repetitivo para tener v-bind. Entonces, podemos reemplazar v-bind: con solo : (por ejemplo , :class , :style , :id , etc.).