Как создать простой список дел с помощью Vue.js — часть 1


О чем эта статья?

Эта статья о создании простого веб-приложения со списком дел с помощью замечательного javascript-фреймворка — Vue. Vue.js завоевал огромную популярность среди разработчиков благодаря своей простоте и удобному для разработчиков синтаксису.

Сегодня я покажу, как создать приложение со списком дел и объясню основные возможности фреймворка. Эта статья будет особенно полезна, если вы новичок в программировании или недавно начали изучать Vue.js. Без долгих разговоров давайте приступим!

Настройка окружения

Существует два способа добавления Vue в ваш проект: с шагом сборки и без шага сборки. Я буду использовать последний, потому что его проще подключить. Более подробную информацию о добавлении Vue вы можете найти здесь.
Сначала мы создадим папку vue-todo-list и добавим в нее файл index.html. Начальный код index.html должен выглядеть следующим образом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue todo list app</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {};
        },
      }).mount("#app");
    </script>
  </body>
</html>

Вход в полноэкранный режим Выйти из полноэкранного режима

После этого

будет ваш шаблон, в который будет выводиться содержимое вашего кода. Метод data внутри createApp всегда должен возвращать объект, свойства которого будут являться реактивным состоянием вашего приложения.

Давайте добавим html-структуру нашего приложения:

<div id="app">
  <input type="text" />
  <button>Add</button>
  <br />
  <br />
  <ul></ul>
</div>

У нас есть поле ввода для ввода содержимого списка todo, кнопка для добавления введенного текста и элемент неупорядоченного списка для отображения всех элементов списка todo.

Теперь добавим код Vue, чтобы сделать наше приложение интерактивным:

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        todolist: [],
        todo: "",
      };
    },
    methods: {
      add() {
        this.todo = this.todo.trim();

        if (!this.todo.length) return;

        this.todolist.push(this.todo);
        this.todo = "";
      },
    },
  }).mount("#app");
</script>

todolist внутри атрибута data — это массив, в котором мы будем хранить элементы списка todo, а todo — это текущее значение todo, которое пользователь вводит в поле ввода. Внутри методов мы можем написать все функциональные возможности при наступлении какого-либо события.

А теперь давайте привяжем логику Vue к нашему шаблону:

<div id="app">
  <input type="text" v-model="todo" />
  <button @click="add">Add</button>
  <br />
  <br />
  <ul>
    <li v-for="item in todolist" :key="item">{{item}}</li>
  </ul>
</div>

Здесь v-model — это директива Vue, к которой привязывается элемент ввода и наши реактивные данные. Чтобы добавить слушателей событий к элементу, мы должны добавить @ перед именем события. Директива v-for используется для многократного отображения содержимого на основе исходных данных. Атрибут key — это как id элемента. Поведение v-for по умолчанию будет пытаться расположить элементы на месте, не перемещая их. Чтобы заставить его изменить порядок элементов, вы должны предоставить подсказку для упорядочивания с помощью специального атрибута key. А для рендеринга атрибутов данных внутри шаблона следует обернуть их двойными фигурными скобками {{}}.

В этой статье мы узнали, как добавить Vue.js в проект, как отрисовывать реактивные данные, как добавить слушателей событий и некоторые основные директивы Vue. В следующих частях я добавлю стилизацию и покажу, как работать с localStorage, чтобы сохранить наши данные после обновления.

Надеюсь, вам понравилась эта статья. Спасибо за прочтение.

Оцените статью
devanswers.ru
Добавить комментарий