Vue.js - это прогрессивная среда JavaScript с открытым исходным кодом для создания пользовательских интерфейсов. В настоящее время это один из крупных игроков в мире UI-фреймворков, наряду с React и Angular. Он легкий (~ 20–30 КБ), прост в освоении и легко интегрируется с существующими проектами и библиотеками. Vue также предоставляет исчерпывающую документацию на своем веб-сайте с примерами кода.

Вдохновленный Техникой Помидора, я подумал, что было бы весело познакомиться с Vue, создав персональный таймер Помидора.

Техника Помидора - это метод управления временем, помогающий повысить продуктивность. Идея состоит в том, чтобы разбить задачи на 25-минутные интервалы и сосредоточиться на одной задаче, не отвлекаясь (например, текст, социальные сети). По истечении 25 минут вы можете вознаградить себя коротким перерывом (обычно 5 минут), прежде чем продолжить. Если делать частые перерывы и сосредотачиваться только на одной задаче за раз, производительность увеличивается. Подробнее о технике здесь.

Таймер помидора для этого урока:

Шаг 1. Настройка

Создайте файловую структуру следующим образом:

- index.js
- index.html
- index.css (optional for styling)

Есть разные способы включить Vue в наш проект. Vue избавляется от большого количества шаблонного кода, необходимого для начала работы. Для простоты я собираюсь использовать теги скрипта в файле index.html.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Шаг 2. Создайте новый экземпляр Vue

Создайте экземпляр Vue и передайте следующие свойства Vue: el, data, methods и computed.

  • el указывает Vue отображать приложение внутри HTML div с идентификатором, равным 'app'
  • data объект будет содержать информацию, которую мы хотим, чтобы Vue отображал в DOM.
  • methods будет содержать обработчики событий для нажатия на «пуск», «пауза» и «сброс».
  • computed будет содержать наши вычисления минут и секунд
const app = new Vue({  
 el: '#app',    
 data: { },    
 methods: { },   
 computed: { }     
})

Шаг 3. Добавьте данные

Думайте об объекте данных как о нашем «состоянии». Мы хотим включить все, что будет отображаться в DOM для нашего таймера. Обновления, внесенные в объект данных, автоматически обновят наше приложение. Связывая объект данных с DOM, была создана реактивная связь, при которой Vue будет автоматически обновлять приложение при внесении изменений в данные. Другими словами, Vue позволяет нам декларативно отображать данные в DOM.

Шаг 4: Добавьте методы

Свойство method содержит различные функции, которые будут управлять нашим таймером и обновлять значения внутри объекта данных в зависимости от событий (то есть при нажатии кнопки «Пуск»).

  • handleStart: функция setInterval () вызывает метод обратного отсчета каждую 1 секунду (1000 миллисекунд)
  • ReduceTimer: уменьшает оставшееся время на 1
  • handlePause: останавливает таймер от работы
  • handleReset: перезапускает таймер до 25 минут и применяет исходные значения к объекту данных

Шаг 5: подсчитайте минуты и секунды

Вычисленное свойство позволяет нам вычислять минуты и секунды, которые будут отображаться на таймере.

Шаг 6. Заполните HTML-файл

Двойные фигурные скобки {{}} используются для привязки минут и секунд к модели DOM и отображения их на нашем таймере.

Обратите внимание, что теги кнопок имеют директиву v-on. Директивы Vue - это атрибуты HTML, предоставляемые Vue, которые применяют особое реактивное поведение к визуализированной модели DOM. Каждая директива имеет уникальные функции и узнаваема, потому что в них предварительно записано "v-."

В этом случае при нажатии кнопки «Пуск» вызывается обработчик события (handleStart).

Шаг 7. Создайте стиль своего Помидора (необязательно)

Создайте индивидуальный таймер для помидоров в соответствии с вашими предпочтениями.

Все сделано!

Надеюсь, вам понравился этот урок! Удачного Vueing!