El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Introducción

La sintaxis de plantillas en Vue.js es una característica poderosa que permite a los desarrolladores crear interfaces de usuario dinámicas y reactivas de manera sencilla. En este tema, aprenderás cómo utilizar la sintaxis de plantillas para enlazar datos, manejar eventos y aplicar lógica condicional en tus aplicaciones Vue.

Contenido

Interpolación de Datos
Directivas de Vue
Expresiones en Plantillas
Atributos HTML y Clases
Eventos

Interpolación de Datos

La interpolación de datos es la forma más básica de enlazar datos en Vue.js. Utiliza la sintaxis de doble llave {{ }} para mostrar datos dinámicos en el DOM.

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hola, Vue.js!'
    }
  });
</script>

Explicación:

{{ message }}: Interpola el valor de message en el DOM.
data: { message: 'Hola, Vue.js!' }: Define el dato message en la instancia de Vue.

Directivas de Vue

Las directivas son atributos especiales con el prefijo v- que proporcionan funcionalidad adicional a los elementos del DOM.

v-bind

La directiva v-bind se utiliza para enlazar atributos de HTML a datos de Vue.

<div id="app">
  <a v-bind:href="url">Visita Vue.js</a>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      url: 'https://vuejs.org'
    }
  });
</script>

Explicación:

v-bind:href="url": Enlaza el atributo href del enlace al dato url.

v-model

La directiva v-model se utiliza para enlazar datos bidireccionalmente con elementos de formulario.

<div id="app">
  <input v-model="message" placeholder="Escribe algo">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: ''
    }
  });
</script>

Explicación:

v-model="message": Enlaza el valor del input con el dato message.

Expresiones en Plantillas

Las expresiones en plantillas permiten realizar operaciones simples dentro de la interpolación.

<div id="app">
  <p>{{ number + 1 }}</p>
  <p>{{ isActive ? 'Activo' : 'Inactivo' }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      number: 5,
      isActive: true
    }
  });
</script>

Explicación:

{{ number + 1 }}: Realiza una operación aritmética.
{{ isActive ? 'Activo' : 'Inactivo' }}: Utiliza una expresión condicional.

Atributos HTML y Clases

v-bind:class

La directiva v-bind:class se utiliza para enlazar clases CSS dinámicamente.

<div id="app">
  <div v-bind:class="{ active: isActive }">Contenido</div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isActive: true
    }
  });
</script>

Explicación:

v-bind:class="{ active: isActive }": Añade la clase active si isActive es true.

v-bind:style

La directiva v-bind:style se utiliza para enlazar estilos en línea dinámicamente.

<div id="app">
  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Texto Estilizado</div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      activeColor: 'red',
      fontSize: 14
    }
  });
</script>

Explicación:

v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }": Aplica estilos en línea basados en los datos activeColor y fontSize.

Eventos

v-on

La directiva v-on se utiliza para manejar eventos del DOM.

<div id="app">
  <button v-on:click="greet">Saludar</button>
</div>

<script>
  new Vue({
    el: '#app',
    methods: {
      greet: function() {
        alert('Hola, Vue.js!');
      }
    }
  });
</script>

Explicación:

v-on:click="greet": Asocia el evento click del botón al método greet.

Ejercicios Prácticos

Ejercicio 1: Interpolación de Datos

Instrucciones:

Crea una instancia de Vue con un dato llamado name.
Muestra el valor de name en un párrafo utilizando la interpolación de datos.

Solución:

<div id="app">
  <p>{{ name }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      name: 'Juan'
    }
  });
</script>

Ejercicio 2: Enlazando Atributos

Instrucciones:

Crea una instancia de Vue con un dato llamado imageUrl.
Enlaza el atributo src de una imagen al dato imageUrl.

Solución:

<div id="app">
  <img v-bind:src="imageUrl" alt="Imagen">
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      imageUrl: 'https://via.placeholder.com/150'
    }
  });
</script>

Ejercicio 3: Manejo de Eventos

Instrucciones:

Crea una instancia de Vue con un método llamado showAlert.
Asocia el evento click de un botón al método showAlert.

Solución:

<div id="app">
  <button v-on:click="showAlert">Mostrar Alerta</button>
</div>

<script>
  new Vue({
    el: '#app',
    methods: {
      showAlert: function() {
        alert('¡Alerta mostrada!');
      }
    }
  });
</script>

Conclusión

En esta sección, has aprendido los conceptos básicos de la sintaxis de plantillas en Vue.js, incluyendo la interpolación de datos, el uso de directivas, expresiones en plantillas, y el manejo de eventos. Estos fundamentos te permitirán crear interfaces de usuario dinámicas y reactivas. En el próximo módulo, profundizaremos en la vinculación de datos y cómo aprovechar al máximo las capacidades reactivas de Vue.js.

Sintaxis de Plantillas

Introducción

Contenido

Interpolación de Datos

Directivas de Vue

v-bind

v-model

Expresiones en Plantillas

Atributos HTML y Clases

v-bind:class

v-bind:style

Eventos

v-on

Ejercicios Prácticos

Ejercicio 1: Interpolación de Datos

Ejercicio 2: Enlazando Atributos

Ejercicio 3: Manejo de Eventos

Conclusión

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js