Directivas en Vue.js

En Vue.js, las directivas son atributos especiales prefijados con v- que proporcionan funcionalidades reactivas. Por ejemplo, v-bind enlaza dinámicamente un atributo de un elemento a una expresión.

<div id="contenedor" v-bind:alt="info">
  Texto de demostración
</div>

<script>
  new Vue({
    el: '#contenedor',
    data: {
      info: 'Descripción dinámica'
    }
  })
</script>

Aquí, el atributo alt del div se sincroniza con la propiedad info del estado de Vue.

Control de renderizado con v-if

La directiva v-if permite mostrar u ocultar elementos condicionalmente. Se difernecia de v-show en que elimina el elemento del DOM.

<div id="aplicacion" v-if="visible" v-on:click="alternar">
  {{ texto }}
</div>

<script>
  new Vue({
    el: '#aplicacion',
    data: {
      texto: 'Contenido condicional',
      visible: true
    },
    methods: {
      alternar: function() {
        this.visible = !this.visible;
      }
    }
  })
</script>

El método alternar invierte el valor de visible, controlando la aparición del elemento mediante v-if.

Renderizado de listas con v-for

Para iterar sobre arrays y renderizar elementos repetidos, se utiliza v-for.

<div id="aplicacion">
  <ul>
    <li v-for="elemento in conjunto">{{ elemento }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#aplicacion',
    data: {
      conjunto: ['Primer ítem', 'Segundo ítem', 'Tercer ítem']
    }
  })
</script>

Cualquier modificación en el array conjunto actualizará automáticamente la lista en la interfaz.

Manejo de eventos con v-on

v-on escucha eventos del DOM, como clics o teclas, y ejecuta métodos definidos en la instancia de Vue.

<div id="aplicacion">
  {{ mensaje }}
  <button v-on:click="mostrarAlerta">Activar</button>
</div>

<script>
  new Vue({
    el: '#aplicacion',
    data: {
      mensaje: 'Interacción con eventos'
    },
    methods: {
      mostrarAlerta: function() {
        alert('¡Evento disparado!');
      }
    }
  })
</script>

El botón dispara la función mostrarAlerta al hacer clic, demostrando la enlazón de eventos.

Enlace bidireccional con v-model

v-model sincroniza datos entre controles de formulario y el estado de Vue, permitiendo la reactividad bidireccional.

<div id="aplicacion">
  <input v-model="campoTexto"></input>
  <button v-on:click="resetear">Reiniciar</button>
</div>

<script>
  new Vue({
    el: '#aplicacion',
    data: {
      campoTexto: 'Valor inicial'
    },
    methods: {
      resetear: function() {
        this.campoTexto = 'Reset completado';
      }
    }
  })
</script>

Al modificar el input o hacer clic en el botón, ambos elementos se actualizan de manera reactiva.

Componentización en Vue.js

Vue promueve la arquitectura basada en componentes, donde la interfaz se divide en piezas reutilizables e independientes.

<div id="app">
  <componente-personalizado></componente-personalizado>
</div>

<script>
  Vue.component('componentePersonalizado', {
    template: '<div>Componente aislado</div>'
  })

  new Vue({
    el: '#app'
  })
</script>

Los componentes se registran con nombres en camelCase, pero se usan en HTML con guiones para evitar problemas de mayúsculas/minúsculas.

Comunicación entre componentes padre e hijo

Para pasar datos de un componente padre a uno hijo, se emplea v-bind junto con props en el componente hijo.

<div id="app">
  <hijo-comp v-bind:datos="informacion"></hijo-comp>
</div>

<script>
  Vue.component('hijoComp', {
    props: ['datos'],
    template: '<div>{{ datos }}</div>'
  })

  new Vue({
    el: '#app',
    data: {
      informacion: 'Dato desde el padre'
    }
  })
</script>

El componente hijo declara props para recibir los datos enlazados con v-bind, facilitando el flujo de inforamción jerárquico.