Creación de una TodoList aplicación con Vue.js

Aquí hay una guía detallada paso a paso con ejemplos de código específicos para crear una TodoList aplicación con Vue.js:

Paso 1: Configuración del proyecto

Comience creando un nuevo Vue.js proyecto usando Vue CLI. Abre tu terminal y ejecuta el siguiente comando:

vue create todo-list-app

Esto creará un nuevo directorio llamado todo-list-app con la estructura básica del proyecto y las dependencias.

 

Paso 2: Creando el TodoList Component

Dentro de la src carpeta, crea un nuevo archivo llamado TodoList.vue. Este será el componente principal de la TodoList aplicación.

en TodoList.vue:

<template>  
  <div>  
    <h1>TodoList</h1>  
    <!-- Render TodoItems here -->  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'TodoList',  
  data() {  
    return {  
      todos: [  
        { id: 1, text: 'Learn Vue.js', completed: false },  
        { id: 2, text: 'Build a TodoList app', completed: false },  
        // Add more todo items here  
      ]  
    };  
  }  
};  
</script>  
  
<style>  
/* Add your custom styles here */  
</style>

 

Paso 3: Creando el TodoItem Component

Dentro de la src carpeta, crea un nuevo archivo llamado TodoItem.vue. Este será un componente secundario responsable de representar elementos de tareas individuales.

en TodoItem.vue:

<template>  
  <div:class="{ 'completed': todo.completed }">  
    <input type="checkbox" v-model="todo.completed">  
    <span>{{ todo.text }}</span>  
    <button @click="deleteTodo">Delete</button>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'TodoItem',  
  props: ['todo'],  
  methods: {  
    deleteTodo() {  
      // Emit a custom event to notify the parent component(TodoList) to delete this todo item  
      this.$emit('delete', this.todo.id);  
    }  
  }  
};  
</script>  
  
<style scoped>  
.completed {  
  text-decoration: line-through;  
}  
</style>

 

Paso 4: Actualización de la TodoList Component

Dentro TodoList de .vue, actualice la sección de la plantilla para representar las TodoItem s usando la directiva v-for.

en TodoList.vue:

<template>  
  <div>  
    <h1>TodoList</h1>  
    <div v-for="todo in todos":key="todo.id">  
      <TodoItem:todo="todo" @delete="deleteTodo"></TodoItem>  
    </div>  
    <!-- Add a form to add new todo items -->  
    <form @submit.prevent="addTodo">  
      <input type="text" v-model="newTodoText">  
      <button type="submit">Add Todo</button>  
    </form>  
  </div>  
</template>  
  
<script>  
import TodoItem from './TodoItem.vue';  
  
export default {  
  name: 'TodoList',  
  components: {  
    TodoItem  
  },  
  data() {  
    return {  
      todos: [  
        { id: 1, text: 'Learn Vue.js', completed: false },  
        { id: 2, text: 'Build a TodoList app', completed: false },  
        // Add more todo items here  
      ],  
      newTodoText: ''  
    };  
  },  
  methods: {  
    deleteTodo(id) {  
      // Find the index of the todo item in the array  
      const index = this.todos.findIndex(todo => todo.id === id);  
      // Remove the item from the array  
      this.todos.splice(index, 1);  
    },  
    addTodo() {  
      if(this.newTodoText) {  
        // Generate a unique ID for the new todo item  
        const newTodoId = this.todos.length + 1;  
        // Create a new todo item object and add it to the array  
        this.todos.push({  
          id: newTodoId,  
          text: this.newTodoText,  
          completed: false  
        });  
        // Clear the input field  
        this.newTodoText = '';  
      }  
    }  
  }  
};  
</script>  
  
<style>  
/* Add your custom styles here */  
</style>

 

Paso 5: Prueba de la TodoList aplicación

Para probar la TodoList aplicación, abra el archivo "src/App.vue" y reemplace el contenido existente con el siguiente código:

<template>  
  <div id="app">  
    <TodoList></TodoList>  
  </div>  
</template>  
  
<script>  
import TodoList from './TodoList.vue';  
  
export default {  
  name: 'App',  
  components: {  
    TodoList  
  }  
};  
</script>  
  
<style>  
/* Add your global styles here */  
</style>

 

Paso 6: ejecutar la aplicación

Guarde todos los cambios e inicie el servidor de desarrollo ejecutando el siguiente comando en la terminal:

npm run serve

Visite http://localhost:8080 en su navegador web para ver la TodoList aplicación en acción.

Este ejemplo demuestra la funcionalidad básica de un

TodoList aplicación usando Vue.js. Los usuarios pueden ver una lista de elementos pendientes, marcarlos como completados, eliminarlos y agregar nuevos elementos utilizando el formulario proporcionado. El estado de los elementos de tareas pendientes se administra en el TodoList componente, mientras que cada elemento individual de tareas pendientes se representa mediante el TodoItem componente.

Tenga en cuenta que se trata de una implementación simplificada y que puede personalizar y mejorar la aplicación aún más según sus necesidades específicas.