Создать менеджер задач на Vue.js

Введение

В этом проекте вы научитесь создавать простое приложение для управления задачами с использованием Vue.js. Приложение для управления задачами позволяет вам создавать, удалять и отслеживать свои ежедневные задачи, помогая вам стать мастером в управлении временем.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• настраивать среду Vue.js;
• по умолчанию отображать "Нет данных", когда страница загружается;
• добавлять задачи в список задач;
• удалять задачи из списка задач;
• отображать общее количество задач;
• очищать весь список задач.

🏆 Достижения

После завершения этого проекта вы сможете:

• создавать приложение Vue.js с нуля;
• использовать директивы и связывание данных Vue.js;
• реализовывать базовую функциональность CRUD (Create, Read, Update, Delete);
• обрабатывать взаимодействия пользователя и соответствующим образом обновлять интерфейс пользователя.

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

├── css
│   └── style.css ## Файл стиля страницы
├── img
│   └── icon.png ## Маленькие иконки, необходимые странице
├── js
│    └── vue.js ## Версия 2.x фреймворка Vue.js
└── index.html ## Файл с разметкой и логикой страницы

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Текущий вывод представляет собой только статическую разметку и не реализует конкретные функции.

Отображать "Нет данных" по умолчанию

В этом шаге вы будете отображать "Нет данных" по умолчанию при загрузке страницы.

1. В файле index.html добавьте объект data из экземпляра Vue под el: "#box", так, чтобы он содержал массив todoList:

data: {
  todoList: [],
}

2. В структуре HTML удалите весь код из <ul class="list"></ul>. Затем добавьте условное отображение, чтобы отобразить "Нет данных", если массив todoList пуст:

<ul class="list">
  <li v-if="!todoList.length">Нет данных</li>
  <!-- TODO: Добавьте элементы списка задач здесь -->
</ul>

3. Сохраните файл index.html и обновите страницу. Вы должны увидеть отображаемое сообщение "Нет данных". Финальный эффект реализации выглядит так:

Добавить задачи в список

В этом шаге вы будете добавлять задачи в список задач.

1. В файле index.html добавьте поле ввода и кнопку "Подтвердить" в структуру HTML:

<div class="input">
  <span>content</span>
  <input
    type="text"
    v-model="search"
    placeholder="Please enter what you're going to do"
  />
  <span id="add" @click="addTodo">Confirm</span>
</div>

2. В экземпляре Vue добавьте свойство данных search и метод addTodo:

data: {
  todoList: [],
  search: ""
},
methods: {
  addTodo() {
    this.todoList.push(this.search);
    this.search = "";
  },
}

3. Сохраните файл index.html и обновите страницу. Теперь вы должны быть able ввести текст в поле ввода и нажать кнопку "Подтвердить", чтобы добавить новую задачу в список. Финальный эффект реализации выглядит так:

Удалить задачи из списка

В этом шаге вы добавите функциональность для удаления задач из списка задач.

1. В файле index.html добавьте иконку "Удалить" к каждому элементу задачи:

<li v-if="!todoList.length">Нет данных</li>
<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!-- Предыдущий порядковый номер -->
  <span class="number">{{index + 1}}</span>
  <!-- Содержание списка -->
  <span>{{todo}}</span>
  <!-- Кнопка удаления -->
  <span class="delete" @click="deleteTodo(index)"></span>
</li>

2. В экземпляре Vue добавьте метод deleteTodo:

methods: {
  //...
  deleteTodo(index) {
    this.todoList.splice(index, 1);
  },
}

3. Сохраните файл index.html и обновите страницу. Теперь вы должны быть able нажать на иконку "Удалить", чтобы удалить задачу из списка. Финальный эффект реализации выглядит так:

Отображать общее количество задач

В этом шаге вы будете отображать общее количество задач в списке задач.

1. В структуре HTML добавьте раздел "Всего" внизу списка задач:

<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!--... -->
</li>
<li v-if="todoList.length">
  <b> Всего: {{todoList.length}} </b>
  <!--... -->
</li>

2. Сохраните файл index.html и обновите страницу. Вы должны увидеть общее количество задач, отображаемое внизу списка.

Очистить список задач

В этом шаге вы добавите функциональность для очистки всего списка задач.

1. В экземпляре Vue добавьте метод clear:

methods: {
  //...
  clear() {
    this.todoList = [];
    this.search = "";
  }
}

2. В структуре HTML добавьте кнопку "Очистить" в раздел "Всего":

<!--... -->
<li v-if="todoList.length">
  <b> Всего: {{todoList.length}} </b>
  <b id="clear" @click="clear">Очистить</b>
</li>

3. Сохраните файл index.html и обновите страницу. Теперь вы должны быть able нажать кнопку "Очистить", чтобы удалить все задачи из списка.

Поздравляем! Вы завершили проект "Мастер управления временем" с использованием Vue.js. Финальный эффект реализации выглядит так:

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.