Primeros pasos
Lo primero que debemos hacer es instalar de manera global el cliente de Vue en nuestro equipo. Para ello vamos a ejecutar:
npm install -g @vue/cli
# or
yarn global add @vue/cli
Con el comando vue --version puedes comprobar si se instaló correctamente o no. Una vez confirmes que VueJS está instalado, vamos a generar el esqueleto de nuestra aplicación ejecutando el siguiente comando:
vue create vue-task
Ahora que ya hemos generado la estructura de nuestro proyecto, vamos a abrir la carpeta que se nos ha creado, en mi caso vue-task, en nuestro editor de código.
Edición de código
Vamos a crear una carpeta nueva llamada components y dentro de esta un fichero al que llamaremos task.vue, en el vamos a añadir el siguiente código:
<template>
<div>
<h1 class="display-4 text-center">Listado de Tareas</h1>
<hr>
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="card mt-4">
<div class="card-body">
<div class="input-group">
<input type="text" v-model="task" class="form-control form-control-lg" placeholder="Agregar tarea">
<div class="input-group-append">
<button v-on:click="addTask()" class="btn btn-success btn-lg">Agregar</button>
</div>
</div>
<br>
<p v-if="listTask.length == 0">No hay tareas</p>
<ul class="list-group">
<li v-for="(task,index) of listTask" :key="index" class="list-group-item d-flex justify-content-between">
<span class="cursor" v-bind:class="{'text-success': task.completed}" v-on:click="completeTask(index, task)">
<i v-bind:class="[task.completed ? 'far fa-check-circle' : 'far fa-circle']"></i>
</span>
<span v-bind:class="{'line-through': task.completed}">{{ task.name }}</span>
<span class="text-danger cursor" v-on:click="deleteTask(index)">
<i class="fas fa-trash-alt"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Task',
data() {
return{
task: '',
listTask: []
}
},
methods: {
addTask() {
const taskObj = {
name: this.task,
completed: false
}
this.listTask.push(taskObj);
this.task = '';
},
deleteTask(index) {
this.listTask.splice(index, 1);
},
completeTask(index, task) {
this.listTask[index].completed = !task.completed;
}
}
}
</script>
<style scoped>
.cursor{
cursor: pointer;
}
.line-through{
text-decoration:line-through;
}
</style>
Ahora vamos a aclarar el contenido del nuevo fichero y así entenderemos que hace cada línea de código:
- La etiqueta template contiene el HTML que se verá al cargar el componente y con lo que el usuario va a interactuar directamente.
- La etiqueta script contiene toda la lógica que hará que la vista HTML responda a lo que el usuario final espera. Dentro de la etiqueta script vemos que empieza con la declaración del componente y para ello se usa el export default {}. Su contenido se divide es los siguientes objetos JSON:
- name: Es el nombre con el que declaramos el componente.
- data(): Retorna los datos con los que se inicia el componente.
- methods: Contiene la funcionalidad que va a tener nuestro componente. Funciones a las que podremos llamar al pulsar un botón, por ejemplo addTask es una función a la que llamaremos al pulsar el botón agregar. Para llamar a un método de VueJS debemos poner lo siguiente en la etiqueta button:
<button v-on:click="addTask()">Agregar</button> // addTask es el nombre del metodo definido en el methods
-
Nuestro componente tiene los siguientes métodos/funciones:
- addTask: Agrega una tarea/item nueva al objeto listTask con el nombre X.
- deleteTask: Elimina una tarea/item del objeto listTask
- completeTask: Cambia el estado de una tarea/item del objecto listTask editando el valor de completed a true.
Por último tenemos la etiqueta style scoped que sirve para darle estilos a nuestro componente.
Ahora que ya tenemos el componente listo y funcionando, tenemos que colocarlo en la vista de nuestra web app.
Usar el componente nuevo
Para usar un componente en alguna vista debemos importar nuestro componente y declarar el componente, por ejemplo en nuestro fichero App.vue, que es el fichero principal de nuestra web app. Quedaría algo así:
// Importamos el fichero de nuestro componente
import Task from './components/Task'
export default {
name: 'App',
components: {
Task // Añadimos el componente indicando su name
}
}
Una vez hayamos hecho esto, ya solo tenemos que llamar a nuestro componente en el template de la webapp, por ejemplo en nuestro fichero App.vue dentro de las etiquetas template:
<template>
<Task />
</template>
Tan solo con esto ya hemos creado un simple listado de tareas en VueJS. En el siguiente repositorio puedes encontrar el código del proyecto completo:
Top comments (0)