{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":60,"offset":0,"style":"BOLD"}],"text":"ДЛЯ ТЕХ, КТО ПРЯМО СЕЙЧАС ХОЧЕТ СЕБЯ ПОПРОБОВАТЬ ВО FRONTEND\uD83D\uDC47","type":"unstyled","key":"2tkq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Даем пошаговую инструкцию того, как сделать компонент для таймера обратного отсчета на сайт\uD83D\uDCA1","type":"unstyled","key":"oeo5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Потребность в нем возникает довольно часто, например, отсчет до старта продаж или до конца срока действия акции и пр.","type":"unstyled","key":"5gka0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скоро «ЧЁРНАЯ ПЯТНИЦА», сделайте обратный отсчёт для интернет-магазина.","type":"unstyled","key":"am2bi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В качестве фремворка будем использовать VueJS 3 версии, но под любой другой фремворк его адаптировать будет не сложно.","type":"unstyled","key":"2maer"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"ЭТАП 1","type":"header-two","key":"5fter"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала создадим демонстрационный проект для тестирования нашего компонента.","type":"unstyled","key":"2b7fa"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":21,"offset":79}],"inlineStyleRanges":[],"text":"Для этого нужно будет установить среду для сборки NodeJS c официального сайта: https://nodejs.org/ru","type":"unstyled","key":"89har"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":29,"offset":91}],"inlineStyleRanges":[],"text":"Также будем использовать IDE VSCode, ее тоже можно скачать бесплатно с официального сайта: https://code.visualstudio.com","type":"unstyled","key":"1trpp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаем новую папку для проектов открываем ее в vscode и запускаем в нем терминал.","type":"unstyled","key":"6tg73"},{"data":{"image":{"id":"653a4c6109d83230326ac9c5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открытие папки vscode","type":"atomic:image","key":"c8ssq"},{"data":{"image":{"id":"653a4cdffe540c782acb175d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открытие терминала","type":"atomic:image","key":"62evc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В терминале вбиваем команду для создания нового проекта vuejs (попутно он предложит установить утилиту vue-create, а потом предложит указать название проекта и другие опции - там пока можно везде выбрать No):","type":"unstyled","key":"eig7l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```sh","type":"unstyled","key":"fri0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm create vue@latest","type":"unstyled","key":"8v3ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"do2r5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим в терминале в папку проекта:","type":"unstyled","key":"ap7k3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```sh","type":"unstyled","key":"6kfto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cd название проекта","type":"unstyled","key":"b2q5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"14etb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Устанавливаем локально зависимости:","type":"unstyled","key":"2spf5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```sh","type":"unstyled","key":"3jel6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm i","type":"unstyled","key":"b8u7h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"c7110"},{"data":{"image":{"id":"653a4d270d533677b7e22d86"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот так выглядит терминал","type":"atomic:image","key":"8odek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее для локального запуска проекта нужно будет вбить в терминал:","type":"unstyled","key":"8nor3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```sh","type":"unstyled","key":"l87e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm run dev","type":"unstyled","key":"5ecb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"95rul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запустится локальный стенд и будет указана ссылка, по которой можно посмотреть результат (по мере обновления кода и его сохранения стенд будет автоматически обновляться).","type":"unstyled","key":"dbmic"},{"data":{"image":{"id":"653a4d6e689821107faec8b1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат команды npm run dev","type":"atomic:image","key":"di1dr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ЭТАП 2","type":"header-two","key":"208gs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создадим компонент Timer.vue в папке /src/components/ со следующим содержимым:","type":"unstyled","key":"4npsq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```js","type":"unstyled","key":"3q77p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Timer.vue","type":"unstyled","key":"dklml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4a5oi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2jcio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"f3aj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В нем сразу добавим блок с примером отображения результата.","type":"unstyled","key":"5l1ci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим теперь его на главный экран, чтобы можно было наблюдать результат:","type":"unstyled","key":"ac413"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```js","type":"unstyled","key":"99ekm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// App.vue","type":"unstyled","key":"3465u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8jbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"63v4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"9hbs7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При запуске приложения должно получиться следующее:","type":"unstyled","key":"85icm"},{"data":{"image":{"id":"653a4ee5cc3ee817cdf8723f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"d2k9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так как мы хотим сделать компонент переиспользуемым, добавим параметр - целевая дата (до которой нужно отсчитывать время)","type":"unstyled","key":"dro1p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```js","type":"unstyled","key":"6p2b8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// App.vue","type":"unstyled","key":"1pddr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"49iv0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"bcj1r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dciek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"9hcdn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"7u2qk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"e0vum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дата в формате ISO и обязательно UTC, так как момент времени един для всех часовых поясов.","type":"unstyled","key":"aaugq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В самом компоненте таймера добавим чтение этого параметра:","type":"unstyled","key":"6ugc8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```js","type":"unstyled","key":"898bu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Timer.vue","type":"unstyled","key":"mhk5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"76otq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const props = defineProps({ targetDate: String })","type":"unstyled","key":"1emdv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const target = new Date(props.targetDate)","type":"unstyled","key":"56s48"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"8ove"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"e9mdd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ЭТАП 3","type":"header-two","key":"2tf9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь создадим реактивный объект, который будет хранить все данные об оставшемся времени до целевой даты.","type":"unstyled","key":"b8i0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И инициализируем его нулевыми значениями:","type":"unstyled","key":"22a67"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```js","type":"unstyled","key":"3jg8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Timer.vue","type":"unstyled","key":"5tvc6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"egt69"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// объект с нулевыми значениями","type":"unstyled","key":"1jfk7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const nullDiff = {","type":"unstyled","key":"dp8vm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"days: 0,","type":"unstyled","key":"7g0gh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"hours: 0,","type":"unstyled","key":"drkne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"minutes: 0,","type":"unstyled","key":"b7bls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"seconds: 0,","type":"unstyled","key":"a2ggb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"dgsbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// реактивная переменная для хранения вычисленных значений (изначально хранит данные из nullDiff)","type":"unstyled","key":"9gc71"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const diff = reactive(nullDiff)","type":"unstyled","key":"4d22q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"ej51i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"co08a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим в верстку теперь данные из этой переменной:","type":"unstyled","key":"624sc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```js","type":"unstyled","key":"2qgg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Timer.vue","type":"unstyled","key":"u67m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"7fviq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"89v4l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"78hqv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"q9af"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь реализуем функцию для вычисления значений таймера:","type":"unstyled","key":"efsgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```js","type":"unstyled","key":"56c2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Timer.vue","type":"unstyled","key":"a5qi6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"6btjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const updateDiff = () => {","type":"unstyled","key":"2bhh1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const now = new Date() // сохраняем в переменную текущее время","type":"unstyled","key":"48jfm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const result = new Date(target.getTime() - now.getTime()) // вычисляем разницу в миллисекундах и преобразуем в формат даты для удобного чтения отдельных позиций: дней, часов и т д","type":"unstyled","key":"6iqvc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// если дата находится в прошлом, то пусть таймер отображает нулевые значения","type":"unstyled","key":"5dp2g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (result <= 0) {","type":"unstyled","key":"9h8vj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Object.assign(diff, nullDiff)","type":"unstyled","key":"2hdcp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return","type":"unstyled","key":"bii5c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"d2in8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// из разницы (которая была преобразована в формат даты) достаем все позиции","type":"unstyled","key":"em84f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Object.assign(diff, {","type":"unstyled","key":"9sv4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"days: result.getUTCDate() - 1, // так как у формата даты минимальное значение 1, необходимо вычесть единицу","type":"unstyled","key":"3oaie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"hours: result.getUTCHours(),","type":"unstyled","key":"bv8mk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"minutes: result.getUTCMinutes(),","type":"unstyled","key":"2m2sd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"seconds: result.getUTCSeconds(),","type":"unstyled","key":"7fu79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"})","type":"unstyled","key":"dvg87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"56bsn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"b6mv0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"77vjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поясним, зачем мы разницу в миллисекундах преобразуем в формат даты.","type":"unstyled","key":"64qvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Команда target.getTime() возвращает количество миллисекунд до этого момента, начиная с 1 января 1970 года.","type":"unstyled","key":"eehml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда мы берем разницу target.getTime() - now.getTime(), мы результат получаем тоже в мс.","type":"unstyled","key":"dhu40"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Доставать оттуда значения дней, часов и пр. довольно сложно и есть риск ошибиться.","type":"unstyled","key":"gae0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда мы преобразуем эту разницу снова в Date, то получаем что-то вроде даты 1970-01-14Т22:21:15.","type":"unstyled","key":"erhsk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отсюда уже легко вычленить отдельные позиции.","type":"unstyled","key":"ehpqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь при обновлении страницы получим актуальное значение таймера до выбранной даты.","type":"unstyled","key":"6tt8k"},{"data":{"image":{"id":"653a4f0ebbee8768d4327968"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6992c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Однако секунды остановились и не меняются.","type":"unstyled","key":"ed5cq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для этого необходимо завести встроенный таймер (буду называть его js-таймер, чтобы не путать), чтобы он каждую секунду обновлял значение:","type":"unstyled","key":"4sumh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```js","type":"unstyled","key":"oc9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Timer.vue","type":"unstyled","key":"fms17"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"95vg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const UPDATE_INTERVAL = 1000 // инервал обновления 1000 миллисекунл = 1 секунда","type":"unstyled","key":"7qd8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const timerID = 0 // id js-таймер, для того чтобы потом можно было его удалить","type":"unstyled","key":"2bf5j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"onMounted(() => {","type":"unstyled","key":"63u7c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// при монтировании компонента создадим js-таймер, который будет запускать функцию обновления нашего таймера","type":"unstyled","key":"677n2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const timerID = setInterval(updateDiff, UPDATE_INTERVAL)","type":"unstyled","key":"77ajk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"updateDiff() // запускаем функцию первый раз, чтобы пользователь сразу видел актуальное время","type":"unstyled","key":"6i8mu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"})","type":"unstyled","key":"72l6k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"onUnmounted(() => {","type":"unstyled","key":"eovrf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// при удалении компонента удаляем js-таймер","type":"unstyled","key":"bn2h6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"clearInterval(timerID)","type":"unstyled","key":"315k0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"})","type":"unstyled","key":"8pt02"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"4asnb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"n4od"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В итоге получаем рабочий таймер, который отсчитывает время до определенного момента.","type":"unstyled","key":"504um"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда он дойдет до конца, то остановится:","type":"unstyled","key":"733k0"},{"data":{"image":{"id":"653a4f4847854307cedbc6e6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fjf7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот полный код компонента:","type":"header-three","key":"9sp6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```js","type":"unstyled","key":"636d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Timer.vue","type":"unstyled","key":"2m17"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"avfm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2j3k1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"chfoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"```","type":"unstyled","key":"5es1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":79,"offset":0,"style":"ITALIC"}],"text":"Таймер - один из простых элементов, попробуйте его сделать по нашей инструкции.","type":"unstyled","key":"1s2i5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":0,"style":"ITALIC"}],"text":"Если в процессе написания кода возникнут вопросы, пишите их в комментариях.","type":"unstyled","key":"1p4sg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"ITALIC"}],"text":"Наш эксперт поможет исправить ошибки✔️","type":"unstyled","key":"amspn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"KmkQMihh2EvW3AxNVW3V"}],"entityMap":{"0":{"data":{"href":"https://nodejs.org/ru","url":"https://nodejs.org/ru"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://code.visualstudio.com","url":"https://code.visualstudio.com/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}