El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Conceptos Básicos de Vue.js

Siguiente ►
►

Vue.js es un framework progresivo de JavaScript utilizado para construir interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde el principio para ser adoptable de manera incremental. La biblioteca central se enfoca solo en la capa de vista, y es fácil de integrar con otras bibliotecas o proyectos existentes. Además, Vue es perfectamente capaz de impulsar aplicaciones sofisticadas de una sola página cuando se utiliza en combinación con herramientas modernas y bibliotecas de soporte.

  1. Introducción a Vue.js

¿Qué es Vue.js?

Vue.js es un framework de JavaScript que se utiliza para construir interfaces de usuario. Es conocido por su facilidad de uso, flexibilidad y rendimiento.

Características Clave de Vue.js

  • Reactividad: Vue.js utiliza un sistema de reactividad que actualiza automáticamente la vista cuando los datos cambian.
  • Componentes: Vue.js permite dividir la interfaz de usuario en componentes reutilizables.
  • Directivas: Vue.js proporciona directivas como v-bind, v-model, v-if, v-for, etc., para enlazar datos y manipular el DOM.
  • Transiciones y Animaciones: Vue.js incluye soporte integrado para transiciones y animaciones.

  1. Configuración del Entorno

Instalación de Vue.js

Puedes instalar Vue.js de varias maneras, pero una de las más comunes es a través de un CDN para proyectos pequeños o mediante Vue CLI para proyectos más grandes.

Usando CDN

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

Usando Vue CLI

  1. Instalar Vue CLI:

    npm install -g @vue/cli

  2. Crear un Nuevo Proyecto:

    vue create my-project

  3. Navegar al Directorio del Proyecto y Ejecutarlo:

    cd my-project
npm run serve

  1. Creación de un Proyecto Básico

Estructura de un Proyecto Vue.js

Un proyecto típico de Vue.js creado con Vue CLI tendrá la siguiente estructura de directorios:

my-project/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md

Archivo main.js

El archivo main.js es el punto de entrada de la aplicación Vue.js.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Componente App.vue

El archivo App.vue es el componente raíz de la aplicación.

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  1. Componentes en Vue.js

Creación de Componentes

Los componentes son una de las características más poderosas de Vue.js. Permiten dividir la interfaz de usuario en piezas reutilizables y manejables.

Ejemplo de Componente

<!-- src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Uso de Componentes

Para usar un componente en otro componente, primero debes importarlo y luego registrarlo.

<!-- src/App.vue -->
<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

  1. Directivas en Vue.js

Directivas Comunes

  • v-bind: Enlaza atributos de HTML a datos de Vue.
  • v-model: Crea un enlace bidireccional entre un elemento de formulario y los datos.
  • v-if: Renderiza elementos basados en una condición.
  • v-for: Renderiza una lista de elementos usando un bucle.

Ejemplos de Directivas

<template>
  <div>
    <!-- v-bind -->
    <img v-bind:src="imageSrc" alt="Vue Logo">

    <!-- v-model -->
    <input v-model="message" placeholder="Edit me">
    <p>Message is: {{ message }}</p>

    <!-- v-if -->
    <p v-if="seen">Now you see me</p>

    <!-- v-for -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://vuejs.org/images/logo.png',
      message: '',
      seen: true,
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}
</script>

  1. Ejercicio Práctico

Ejercicio

Crea una aplicación Vue.js que tenga un componente de lista de tareas. La aplicación debe permitir agregar nuevas tareas y marcar las tareas como completadas.

Requisitos

  1. Crea un componente TaskList.vue que muestre una lista de tareas.
  2. Crea un componente TaskItem.vue que represente una tarea individual.
  3. Usa v-model para enlazar un campo de entrada a una nueva tarea.
  4. Usa v-for para iterar sobre las tareas y mostrarlas.
  5. Usa v-bind para enlazar clases CSS basadas en el estado de la tarea (completada o no completada).
  6. Usa v-on para manejar eventos de clic y marcar las tareas como completadas.

Solución

<!-- src/components/TaskItem.vue -->
<template>
  <li :class="{ completed: task.completed }">
    <input type="checkbox" v-model="task.completed">
    {{ task.text }}
  </li>
</template>

<script>
export default {
  name: 'TaskItem',
  props: {
    task: Object
  }
}
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
</style>
<!-- src/components/TaskList.vue -->
<template>
  <div>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="Add a task">
    <ul>
      <TaskItem v-for="task in tasks" :key="task.id" :task="task"/>
    </ul>
  </div>
</template>

<script>
import TaskItem from './TaskItem.vue'

export default {
  name: 'TaskList',
  components: {
    TaskItem
  },
  data() {
    return {
      newTask: '',
      tasks: [
        { id: 1, text: 'Learn Vue.js', completed: false },
        { id: 2, text: 'Build a project', completed: false }
      ]
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({
          id: this.tasks.length + 1,
          text: this.newTask,
          completed: false
        });
        this.newTask = '';
      }
    }
  }
}
</script>
<!-- src/App.vue -->
<template>
  <div id="app">
    <TaskList />
  </div>
</template>

<script>
import TaskList from './components/TaskList.vue'

export default {
  name: 'App',
  components: {
    TaskList
  }
}
</script>

Conclusión

En esta sección, hemos cubierto los conceptos básicos de Vue.js, incluyendo la configuración del entorno, la creación de componentes, y el uso de directivas. También hemos realizado un ejercicio práctico para consolidar estos conceptos. En el siguiente módulo, profundizaremos en temas más avanzados de Vue.js y cómo integrarlo con otras herramientas y librerías.

◄ Anterior
◄
Siguiente ►
►

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados