vamos a aprender cómo crear un proyecto con Vue CLI. Imaginemos que Vue CLI es una herramienta mágica que nos ayuda a construir la estructura inicial de nuestra aplicación de Vue.js, similar a cómo jQuery nos facilita la manipulación del DOM. Vamos a ver cómo hacerlo paso a paso.
Aquí tienes todo el código junto para que lo sigas fácilmente.
# Paso 1: Instalar Vue CLI
npm install -g @vue/cli
# Paso 2: Crear un Nuevo Proyecto
vue create my-first-vue-app
# Selecciona la opción "Default ([Vue 3] babel, eslint)" y presiona Enter
# Paso 3: Navegar al Directorio del Proyecto
cd my-first-vue-app
# Paso 4: Iniciar el Servidor de Desarrollo
npm run serve
# Ahora abre tu navegador y ve a http://localhost:8080/
Vamos a revisar brevemente la estructura de archivos creada:
my-first-vue-app
├── node_modules # Dependencias del proyecto
├── public
│ └── index.html # Archivo HTML principal
├── src
│ ├── assets # Archivos estáticos como imágenes
│ ├── components # Componentes Vue reutilizables
│ │ └── HelloWorld.vue
│ ├── App.vue # Componente raíz de la aplicación
│ └── main.js # Punto de entrada de la aplicación
├── package.json # Dependencias y scripts del proyecto
└── README.md # Información sobre el proyecto
index.html, que es el punto de entrada HTML para nuestra aplicación.vamos a aprender sobre el archivo main.js y el componente App.vue en un proyecto Vue.js. Imaginemos que estamos construyendo una aplicación web utilizando jQuery, pero en lugar de manipular directamente el DOM, vamos a usar Vue.js para hacerlo de manera más estructurada y reactiva.
Aquí está el código completo del archivo main.js y del componente App.vue.
// Archivo: src/main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!-- Archivo: src/App.vue -->
<template>
<div id="app">
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: '¡Hola, Vue.js!'
};
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
main.jsEl archivo main.js es el punto de entrada principal de nuestra aplicación Vue.js. Aquí es donde inicializamos y montamos nuestra aplicación. Vamos a desglosar el código:
// Archivo: src/main.js
import { createApp } from 'vue'; // Importamos la función createApp de Vue
import App from './App.vue'; // Importamos el componente raíz App.vue
createApp(App).mount('#app'); // Creamos una instancia de la aplicación y la montamos en el elemento con id="app"
createApp desde el paquete vue. También importamos App desde el archivo App.vue, que es nuestro componente raíz.createApp para crear una nueva instancia de la aplicación Vue y luego llamamos a .mount('#app') para montar la aplicación en el elemento del DOM con el id app.App.vueEl componente App.vue es el componente raíz de nuestra aplicación. Está compuesto por tres secciones: <template>, <script> y <style>. Vamos a desglosarlo:
<!-- Archivo: src/App.vue -->
<template>
<div id="app">
<h1>{{ message }}</h1> <!-- Usamos la interpolación para mostrar el mensaje -->
</div>
</template>
<script>
export default {
data() { // Definimos la función data que devuelve un objeto con nuestras propiedades reactivas
return {
message: '¡Hola, Vue.js!' // Una propiedad reactiva llamada message
};
}
};
</script>
<style>
#app { // Estilos específicos para el componente App
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Template:
div con el id app y un h1 que muestra el mensaje usando la interpolación ({{ message }}).Script:
export default para exportar un objeto de configuración del componente.data devuelve un objeto que contiene propiedades reactivas. En este caso, tenemos una propiedad llamada message con el valor '¡Hola, Vue.js!'.Style:
div con el id app.Aquí tienes un ejemplo de cómo trabajar con la sintaxis básica y las plantillas en Vue.js:
<!-- Archivo: index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Básico</title>
<script src="https://unpkg.com/vue@next"></script> <!-- Importamos Vue.js -->
</head>
<body>
<div id="app">
<h1>{{ message }}</h1> <!-- Interpolación para mostrar datos -->
<input v-model="message" placeholder="Escribe algo"> <!-- Enlace de datos bidireccional -->
<p v-if="message">Tienes un mensaje: {{ message }}</p> <!-- Directiva condicional -->
<ul>
<li v-for="item in items" :key="item">{{ item }}</li> <!-- Directiva de bucle -->
</ul>
</div>
<script>
// Creación de la aplicación Vue
const app = Vue.createApp({
data() {
return {
message: '¡Hola, Vue.js!', // Propiedad reactiva
items: ['Elemento 1', 'Elemento 2', 'Elemento 3'] // Lista de elementos
};
}
});
// Montar la aplicación en el elemento con id "app"
app.mount('#app');
</script>
</body>
</html>
La interpolación en Vue.js se utiliza para mostrar datos dinámicos en el HTML. Usamos la sintaxis {{ }} para enlazar el contenido de las propiedades del componente con el DOM. En el ejemplo, {{ message }} se utiliza dentro de un elemento <h1> para mostrar el valor de la propiedad message definida en el objeto data.
El enlace de datos bidireccional se logra con la directiva v-model. Esta directiva vincula el valor de un input con una propiedad del componente, de modo que cualquier cambio en el input actualiza la propiedad y viceversa. En el ejemplo, v-model="message" enlaza el valor del input con la propiedad message.
Las directivas en Vue.js son atributos especiales que proporcionan funcionalidad reactiva al DOM.
Directiva Condicional (v-if): La directiva v-if se utiliza para renderizar un elemento solo si la expresión dada es verdadera. En el ejemplo, <p v-if="message">Tienes un mensaje: {{ message }}</p> muestra el párrafo solo si message no está vacío.
Directiva de Bucle (v-for): La directiva v-for se utiliza para renderizar una lista de elementos basados en un array. En el ejemplo, <li v-for="item in items" :key="item">{{ item }}</li> recorre la lista items y crea un elemento <li> para cada ítem en el array. La clave :key="item" ayuda a Vue a seguir el rastro de cada elemento en la lista para optimizar las actualizaciones.
El código en el bloque <script> crea y monta la instancia de la aplicación Vue. Utilizamos Vue.createApp para crear una nueva instancia de aplicación, pasando un objeto de configuración con una función data que devuelve el estado inicial del componente. Luego, montamos esta instancia en el elemento del DOM con el id app usando app.mount('#app').
Las directivas son atributos especiales que proporcionan funcionalidad reactiva a los elementos del DOM. Veremos algunas de las directivas más comunes y cómo se utilizan.
<!DOCTYPE html>
<html>
<head>
<title>Directivas en Vue.js</title>
<script src="https://unpkg.com/vue@next"></script> <!-- Importamos Vue.js -->
</head>
<body>
<div id="app">
<!-- Directiva v-bind para enlazar atributos -->
<img v-bind:src="imageSrc" alt="Ejemplo de v-bind">
<!-- Directiva v-model para enlace bidireccional -->
<input v-model="message" placeholder="Escribe algo">
<p>{{ message }}</p>
<!-- Directiva v-if para renderizado condicional -->
<p v-if="isVisible">Este párrafo solo se muestra si isVisible es true.</p>
<button @click="toggleVisibility">Toggle Visibility</button>
<!-- Directiva v-for para renderizado de listas -->
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
imageSrc: 'https://via.placeholder.com/150', // Fuente de la imagen
message: '', // Mensaje del input
isVisible: true, // Visibilidad del párrafo
items: ['Elemento 1', 'Elemento 2', 'Elemento 3'] // Lista de elementos
};
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
});
app.mount('#app');
</script>
</body>
</html>
v-bindLa directiva v-bind se utiliza para enlazar atributos de HTML a expresiones de Vue.js. Es especialmente útil para dinámicamente cambiar valores de atributos. En el ejemplo, v-bind:src="imageSrc" enlaza el atributo src de la imagen con la propiedad imageSrc del objeto data.
v-modelLa directiva v-model proporciona un enlace bidireccional entre los datos y los elementos de formulario. Sincroniza automáticamente el valor del input con una propiedad del componente. En el ejemplo, v-model="message" vincula el valor del input con la propiedad message. Cualquier cambio en el input actualizará message y viceversa.
v-ifLa directiva v-if se utiliza para renderizado condicional. Solo renderiza el elemento si la expresión dada es verdadera. En el ejemplo, v-if="isVisible" renderiza el párrafo solo si isVisible es true.
v-forLa directiva v-for se utiliza para renderizar una lista de elementos usando los elementos de un array. En el ejemplo, v-for="(item, index) in items" recorre el array items y renderiza un elemento <li> para cada ítem. item representa el valor del elemento y index representa el índice.
La interpolación de datos nos permite mostrar dinámicamente el contenido de nuestras propiedades de datos en el HTML. Es una forma sencilla y poderosa de enlazar datos con la interfaz de usuario.
<!DOCTYPE html>
<html>
<head>
<title>Interpolación de Datos en Vue.js</title>
<script src="https://unpkg.com/vue@next"></script> <!-- Importamos Vue.js -->
</head>
<body>
<div id="app">
<h1>{{ title }}</h1> <!-- Interpolación de una propiedad de datos -->
<p>{{ message }}</p> <!-- Interpolación de otra propiedad de datos -->
<p>La suma de 2 + 3 es: {{ 2 + 3 }}</p> <!-- Interpolación de una expresión -->
<p>Mensaje en mayúsculas: {{ message.toUpperCase() }}</p> <!-- Interpolación con un método -->
<p>Fecha actual: {{ currentDate }}</p> <!-- Interpolación de una propiedad de datos -->
</div>
<script>
const app = Vue.createApp({
data() {
return {
title: 'Interpolación de Datos en Vue.js', // Título de la página
message: '¡Hola, Vue.js!', // Mensaje de bienvenida
currentDate: new Date().toLocaleDateString() // Fecha actual
};
}
});
app.mount('#app');
</script>
</body>
</html>
La interpolación básica en Vue.js se hace utilizando la sintaxis {{ }} dentro de tu HTML. Esto permite mostrar el valor de las propiedades definidas en el objeto data del componente Vue.
{{ title }}: Muestra el valor de la propiedad title.{{ message }}: Muestra el valor de la propiedad message.{{ currentDate }}: Muestra el valor de la propiedad currentDate.Vue.js permite evaluar expresiones simples dentro de las llaves de interpolación. Esto significa que puedes realizar operaciones y mostrar sus resultados directamente en el HTML.
{{ 2 + 3 }}: Evalúa la expresión 2 + 3 y muestra el resultado, que es 5.También puedes llamar a métodos y funciones dentro de las llaves de interpolación para manipular los datos antes de mostrarlos.
{{ message.toUpperCase() }}: Llama al método toUpperCase() en la propiedad message y muestra el resultado en mayúsculas.{{ }} para mostrar el valor de las propiedades de datos directamente en el HTML.Esta directiva nos permite escuchar eventos del DOM y ejecutar métodos en respuesta a esos eventos. Es una forma poderosa y sencilla de hacer que nuestras aplicaciones sean interactivas.
<!DOCTYPE html>
<html>
<head>
<title>Manejo de Eventos en Vue.js</title>
<script src="https://unpkg.com/vue@next"></script> <!-- Importamos Vue.js -->
</head>
<body>
<div id="app">
<button v-on:click="showAlert">Haz clic aquí</button> <!-- Escuchar el evento click -->
<p>{{ message }}</p>
<input v-on:input="updateMessage" placeholder="Escribe algo"> <!-- Escuchar el evento input -->
<button v-on:click="clearMessage">Limpiar mensaje</button> <!-- Otro botón para limpiar el mensaje -->
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: '¡Hola, Vue.js!' // Mensaje inicial
};
},
methods: {
showAlert() {
alert('¡Botón clicado!'); // Método para mostrar una alerta
},
updateMessage(event) {
this.message = event.target.value; // Método para actualizar el mensaje con el valor del input
},
clearMessage() {
this.message = ''; // Método para limpiar el mensaje
}
}
});
app.mount('#app');
</script>
</body>
</html>
v-on:clickLa directiva v-on se utiliza para escuchar eventos del DOM y ejecutar métodos en respuesta. El evento más común es click, que se activa cuando el usuario hace clic en un elemento.
<button v-on:click="showAlert">Haz clic aquí</button>: Este botón escucha el evento click y llama al método showAlert cuando se hace clic.Los métodos se definen en el objeto methods dentro de la instancia de Vue. En nuestro ejemplo, tenemos tres métodos:
showAlert(): Muestra una alerta cuando se hace clic en el primer botón.updateMessage(event): Actualiza la propiedad message con el valor del input cuando el usuario escribe algo. El parámetro event contiene el evento del DOM, y event.target.value obtiene el valor actual del input.clearMessage(): Limpia el mensaje estableciendo this.message a una cadena vacía.v-on:inputAdemás de click, podemos manejar otros eventos del DOM. El evento input se activa cada vez que el usuario escribe en un campo de entrada.
<input v-on:input="updateMessage" placeholder="Escribe algo">: Este input escucha el evento input y llama al método updateMessage cada vez que el usuario escribe algo. Esto permite actualizar la propiedad message en tiempo real.v-on:click: Escucha el evento click y ejecuta un método en respuesta.v-on:input: Escucha el evento input y ejecuta un método en respuesta.methods dentro de la instancia de Vue y se utilizan para manejar la lógica de los eventos.