Andrey Lozunov - Fullstack Web Developer
Andrey Lozunov - Fullstack Web Developer
  • 12
  • 42 759
Alpine.JS с нуля. Урок #7. Циклы. Отрисовка списка элементов. Директива x-for.
Привет, друзья!
В данном видео мы поговорим про циклы и отрисовку списков элементов в Alpine.JS. Для организации циклов в Alpine.JS имеется специальная директива x-for, которую мы и разберем подробно.
00:00:00 Вступление
00:02:53 Директива x-for
00:04:18 Свойство key
00:05:32 Получение индекса массива
00:07:02 Получение перебираемого массива
00:08:00 Вложенные циклы и перебор массива
00:09:16 Вложенные циклы и перебор объекта
00:10:40 Управление количеством итераций
Официальная документация по x-for в Alpine.JS 3.X: alpinejs.dev/directives/for
Официальная документация по x-for в Alpine.JS 2.X: github.com/alpinejs/alpine/blob/v2.8.2/README.ru.md#x-for
Приятного просмотра!
#javascript #js #alpine #alpinejs
มุมมอง: 1 586

วีดีโอ

Alpine.JS с нуля. Урок #6. Вывод простого текста и html-разметки. Директивы x-text и x-html.
มุมมอง 5302 ปีที่แล้ว
Привет, друзья! В данном видео мы поговорим про вывод текста и html-разметки в Alpine.JS, то есть про директивы x-text и x-html. Тема эта хоть и очень простая, но при первом знакомстве с библиотекой все равно требующая некоторых разъяснений. 00:00:00 Вступление 00:00:44 Директива x-text 00:01:22 Директива x-text и конкатенация 00:02:00 Директива x-text и интерполяция 00:02:30 Директива x-text и...
Alpine.JS с нуля. Урок #5. Условный рендеринг. Директивы x-show и x-if. DOM-узел DocumentFragment.
มุมมอง 6302 ปีที่แล้ว
Привет, друзья! В данном видео мы поговорим про условный рендеринг в Alpine.JS. Под условным рендерингом я имею ввиду возможность скрывать или показывать какую-то часть вашего интерфейса при определенных обстоятельствах, т.е. по какому-то условию. Для решения подобных задач Alpine.JS предоставляет нам целых две директивы - x-show и x-if. Давайте познакомимся с каждой из них подробнее и разберём...
Alpine.JS с нуля. Урок #4.2. Модификаторы директивы x-on.
มุมมอง 8632 ปีที่แล้ว
Привет, друзья! В данном видео мы продолжим разбираться с директивой x-on, а точнее - рассмотрим все имеющиеся у нее модификаторы, представляющие из себя набор полезных настроек, в очередной раз избавляющих нас от лишней писанины в коде. 00:00:00 Вступление 00:00:25 Модификаторы document и window 00:04:50 Модификатор camel 00:07:42 Модификатор dot 00:08:53 Модификаторы для отслеживания нажатия ...
Alpine.JS с нуля. Урок #4.1. Работа с событиями. Директива x-on.
มุมมอง 1.7K2 ปีที่แล้ว
Привет, друзья! В данном видео мы поговорим про обработку событий браузеров в Alpine.JS, а так же подробно рассмотрим вторую по важности директиву - x-on. Это первая часть урока, в которой мы познакомимся с регистрацией слушателей событий, посмотрим как в Alpine.JS получить доступ к объекту события, а так же научимся создавать и отлавливать собственные события для взаимодействия между компонент...
Alpine.JS с нуля. Урок #3. Компоненты. Директива x-data.
มุมมอง 2.1K2 ปีที่แล้ว
Привет, друзья! В данном видео мы поговорим о компонентах в Alpine.JS, а так же подробно рассмотрим все нюансы одной из главных директив - x-data. 00:00 О компонентах в общем 01:55 Знакомство с x-data 08:39 x-data и область видимости (scope) 14:20 Методы в x-data 18:47 Геттеры в x-data 21:39 Компоненты без данных 23:32 Компоненты из одного элемента 25:13 Выносные компоненты в Alpine.JS 3.X 31:5...
Alpine.JS с нуля. Урок #2. Особенности подключения Alpine.JS версии 3.X
มุมมอง 1.8K2 ปีที่แล้ว
Привет, друзья! В данном видео мы поговорим об особенностях подключения Alpine.JS версии 3.X по сравнению с версией 2.X. 00:00 Введение 01:11 Alpine.JS и IE 11 02:25 Способы подключения 05:20 Отличия в подключении Видео о подключении Alpine.JS 2.X: th-cam.com/video/gszM-iaQMSs/w-d-xo.html Обновленная официальная документация: alpinejs.dev/start-here Приятного просмотра! #javascript #js #alpine ...
Alpine.JS с нуля. Урок #1. Что такое Alpine.JS? Когда использовать? Как установить?
มุมมอง 6K3 ปีที่แล้ว
Привет, друзья! В данном видео мы поговорим об Alpine.JS. Это мое первое видео о данном фреймворке. В нем я расскажу что это за фреймворк такой, чем он отличается от Vue и React, кому и когда он может быть полезен и какими способами его можно установить на свой проект. 00:00 Введение 01:16 Что такое Alpine.JS? 05:44 Установка через CDN 08:57 CDN и поддержка IE 11 11:08 Локальное подключение 13:...
JIT в PHP 8: Просто о сложном
มุมมอง 15K3 ปีที่แล้ว
Привет, друзья! В данном видео мы поговорим о JIT в PHP 8. В ходе просмотра видео вы узнаете что это такое, зачем это вообще нужно, как это включить и какую пользу с этого можно получить. 0:00 Введение 1:47 Как выполняется код на PHP? 4:14 PHP и OPCache 6:01 Что такое JIT? 7:10 JIT в PHP 9:36 Как включить JIT? 12:54 Дополнительные настройки JIT 15:20 Как проверить JIT? 16:33 Выводы о JIT Приятн...
PHP 8: Что нового? Полный обзор нововведений
มุมมอง 6K3 ปีที่แล้ว
Привет, друзья! В данном видео мы рассмотрим почти все нововведения PHP 8. Я поделюсь своим мнением относительно новых фич userland-а и расскажу об их особенностях и нюансах на простых примерах. Официальный список нововведений: www.php.net/releases/8.0/ru.php 0:00 Введение 1:23 Именованные аргументы 13:07 Атрибуты 20:38 Объявление свойств в конструкторе 23:02 Объединённые типы (Union types) 27:...
Все о переменных в JavaScript: виды переменных; отличия var, let и const; понятие области видимости.
มุมมอง 3533 ปีที่แล้ว
Привет, друзья! В данном видео я поделюсь с Вами своими знаниями о переменных и константах в JavaScript. Мы выясним что это такое и чем одно отличается от другого, рассмотрим способы объявления переменных, разберемся с ключевыми словами var, let, const и поговорим о локальной и глобальной областях видимости. 0:00 Вступление 0:40 Что такое переменная? 4:00 Что такое константа? 5:32 Объявление пе...
Laravel Mix: настройка, плагины, сборка JavaScript и CSS, оптимизация картинок, создание SVG спрайта
มุมมอง 7K3 ปีที่แล้ว
Привет, друзья! В данном видео я поделюсь с Вами своим личным опытом настройки Laravel Mix. На конкретном примере мы разберем такие задачи, как сборка JS/CSS/SASS/SCSS, оптимизация изображений, использование WEBP, генерация SVG спрайта, версионность статики, поддержка устаревших браузеров и т.д. 0:00 Вступление 1:15 Создание нового проекта 2:20 Базовые пакеты package.json 3:53 Установка дополни...

ความคิดเห็น

  • @njsaab9722
    @njsaab9722 5 หลายเดือนก่อน

    Огромное спасибо за отличный курс, хорошоя идея провести параллели между ванилой и альпаин, считай что два курса прошел)))

  • @njsaab9722
    @njsaab9722 5 หลายเดือนก่อน

    Огромное спасибо за отличный курс, хорошоя идея провести параллели между ванилой и альпаин, считай что два курса прошел)))

  • @njsaab9722
    @njsaab9722 5 หลายเดือนก่อน

    Огромное спасибо за отличный курс, хорошоя идея провести параллели между ванилой и альпаин, считай что два курса прошел)))

  • @njsaab9722
    @njsaab9722 5 หลายเดือนก่อน

    Огромное спасибо за отличный курс, хорошоя идея провести параллели между ванилой и альпаин, считай что два курса прошел)))

  • @tigrpoehal1836
    @tigrpoehal1836 6 หลายเดือนก่อน

    c Laravel компонентами blade очень интересно сочетать)

  • @zt77
    @zt77 7 หลายเดือนก่อน

    Если честно про alpinejs можно за 3 минуты показать все его свойства их не так много а не записывать часовые видео 10 уроков. Там всего 15 атрибутов

  • @wbrframe
    @wbrframe 8 หลายเดือนก่อน

    Хорошая подача, спасибо!

  • @СергейШахворостов-в9ш
    @СергейШахворостов-в9ш 8 หลายเดือนก่อน

    Классный урок, очень полезный! Особенно понравилась часть про кроссбраузерность и svg спрайты. Буду смотреть остальные уроки.

  • @oleksiikaidalov5173
    @oleksiikaidalov5173 9 หลายเดือนก่อน

    тег хёд

  • @dmitriivanov7010
    @dmitriivanov7010 9 หลายเดือนก่อน

    Очень интересно, спасибо

  • @bogdanovmikhail
    @bogdanovmikhail 10 หลายเดือนก่อน

    Приветствую, где-то было анонсирован по взаимодействию с laravel. Будет когда-то?)

    • @tigrpoehal1836
      @tigrpoehal1836 6 หลายเดือนก่อน

      привет, у меня проек на Laravel (фриланс) , alpine подключаю через vite

  • @РоманКаражан
    @РоманКаражан 10 หลายเดือนก่อน

    Очень хорошее видео.

  • @ТимурСафаров-в1ч
    @ТимурСафаров-в1ч 10 หลายเดือนก่อน

    бЛАГОДАРю без лишних слов и разглагольствований с тайм-кодом и поставленной речью донёс всю суть

  • @АнтонМирный-с5х
    @АнтонМирный-с5х 11 หลายเดือนก่อน

    полная шляпа

  • @serhikorn
    @serhikorn 11 หลายเดือนก่อน

    Спасибо!

  • @MaxAlekseyev
    @MaxAlekseyev 11 หลายเดือนก่อน

    Хорошие стримы, спасибо!

  • @powered8473
    @powered8473 11 หลายเดือนก่อน

    По настройке никаких преимуществ по сравнению с gulp я не увидел, может я не прав поправьте. Главная страница на php может в этом его отличие от gulp c html?

  • @malverdo
    @malverdo ปีที่แล้ว

    ты бежишь там чтоли?

  • @ДмитрийЛанец-н3в
    @ДмитрийЛанец-н3в ปีที่แล้ว

    писец 1 и 2 Урок про подключение скрипта, когда же будет реальный разбор?

    • @johnson1769
      @johnson1769 11 หลายเดือนก่อน

      Ждет когда 4 версия выйдет, чтобы про подключение 4ки рассказать.

  • @Архив-в3ц
    @Архив-в3ц ปีที่แล้ว

    14:40

  • @Алекс-ь6х5н
    @Алекс-ь6х5н ปีที่แล้ว

    В русском языке нет слова Сase, есть слово Случай

  • @mikaelgevorgyan4521
    @mikaelgevorgyan4521 ปีที่แล้ว

    токены) чмокены, не знаю пчму они его так назвали токены

  • @АртемАртеменконезабывайвыходит

    Новый видосы будут?

  • @alextopsite
    @alextopsite ปีที่แล้ว

    Хотелось бы больше материала по PHP )

  • @alextopsite
    @alextopsite ปีที่แล้ว

    Спасибо за полезное видео!

  • @kulek-tutiny
    @kulek-tutiny ปีที่แล้ว

    "Интернет Экспойлер" - сначала думал, что послышалось, но потом понял, что нет =)

  • @augcat50
    @augcat50 ปีที่แล้ว

    Интересно, какой смысл спрашивать на собеседовании вещи вроде сравнения нуля со строкой. Абсолютно бесполезное знание, которое либо гуглится за минуту либо проверяется в коде.

  • @augcat50
    @augcat50 ปีที่แล้ว

    Интересно было бы сразу проводить тест скорости, чтобы понимать, именованные аргументы в функциях медленнее, чем старый вариант или нет. Может теперь всегда есть смысл аргументы именовать, для наглядности. А может наоборот стоит такого избегать, потому что это медленно работает.

  • @genaposikin4330
    @genaposikin4330 ปีที่แล้ว

    Отличный курс! Жаль, что обрывается внезапно :(

  • @genaposikin4330
    @genaposikin4330 ปีที่แล้ว

    Спасибо за то что стараетесь разобрать даже мелочи👍

  • @genaposikin4330
    @genaposikin4330 ปีที่แล้ว

    Спасибо за урок, всё понятно объясняете👍

  • @genaposikin4330
    @genaposikin4330 ปีที่แล้ว

    Спасибо за урок, всё предельно понятно. 👍👍👍

  • @genaposikin4330
    @genaposikin4330 ปีที่แล้ว

    Спасибо 🙏 что продолжили снимать курс👍.

  • @ДмитрийПавлович-о8н
    @ДмитрийПавлович-о8н ปีที่แล้ว

    Спасибо!!!

  • @bocsutel3103
    @bocsutel3103 ปีที่แล้ว

    Спасибо, хорошо рассказали. 3 - если много свойств вне конструктора. Часть там, часть тут. Не очень! 4, 5 - да ну нафиг вас всех. Все так стремятся к типизации и в тоже время ищут лазейки что бы использовать разные типы. Типизация так типизация, кушайте не обляпайтесь. (Мне она вообще ни к чему ) И каждому сведующему ясно что типизацию пихают для ускорения ПХП!

  • @medokuk8644
    @medokuk8644 ปีที่แล้ว

    Ничего не видно, можно вежь было увеличить, не все на больших экранах сидят, я в данный момент вообще смотрю через телефон, а так спасибо за урок

  • @michaeldeoz
    @michaeldeoz ปีที่แล้ว

    прям таки дотошный обзор получился

  • @Огент47-т7г
    @Огент47-т7г 2 ปีที่แล้ว

    А по человечки можно подключить css, js? asset('css/style.css') не работает как и url(''). Мне бекенд нужен а не эти заморочки со сборкой стилей

  • @twentxx
    @twentxx 2 ปีที่แล้ว

    Очень интересно и спокойно повествуете, про opcache и любые другие темы послушал бы ещё Спасибо 🙂 👍

  • @lesters
    @lesters 2 ปีที่แล้ว

    хорошие видосжалко что пропал

  • @lesters
    @lesters 2 ปีที่แล้ว

    спасибо то что нужно

  • @xonicov
    @xonicov 2 ปีที่แล้ว

    спасибо!

  • @renatozakirov297
    @renatozakirov297 2 ปีที่แล้ว

    а где же работа alpine совместно с axios? как это все передавать на сервер? нужно дописывать учебник. не ленитесь Андрей

  • @romanalekseevich957
    @romanalekseevich957 2 ปีที่แล้ว

    Епать колотить мои глаза, ну что я такого плохого Вам сделал, за что? С планшета не реально выдержать эти муки, скоро буду плакать кровью. Просто PurgeCSS под продакшен с полифилом, остальное под стили шляпа. Картинки надо беком делать на Ларе, а не руками собирать разработчику.

  • @aleksandrnenashev387
    @aleksandrnenashev387 2 ปีที่แล้ว

    Здравствуйте, подскажите пожалуйста у меня Laravel v9.24.0 (PHP v8.1.9) но файла webpack.mix.js там нет

  • @romanhonchar7278
    @romanhonchar7278 2 ปีที่แล้ว

    При вводе в консоль пишет что "laravel" не является командой. То есть мне нужно сперва установить сам Laravelна ПК?

  • @holu3160
    @holu3160 2 ปีที่แล้ว

    php будет жить вечно! скоро он станет круче даже джавы в вебе😎

  • @seoonlyRU
    @seoonlyRU 2 ปีที่แล้ว

    да, видео огонь! Лайк от СЕООНЛИ

  • @Данил-у9ы8б
    @Данил-у9ы8б 2 ปีที่แล้ว

    Спасибо за сборку и такое подробное объяснение

  • @michealmltefive5510
    @michealmltefive5510 2 ปีที่แล้ว

    ты бы ещё исходники выложил свои что в видео и цены бы тебе не было