Уроки Vue js практика - Пагинация

70 ratings | 2129 views


Уроки Vue js практика - Пагинация

Всем привет, мы продолжаем уроки Vue js на практических примерах и в данном ролике я покажу как сделать своими руками пагинацию. Это отличный пример для использования в Javascript фреймворке Vue.js и вам для наработки базовых знаний с лучшими практиками. В данном уроке мы так же используем css фреймворк Bootstrap 4 и javascript библиотеку lodash, не забудьте их подключить. Вставьте в src тега script

Comments to the video: Уроки Vue js практика - Пагинация

Ruslan Karimov 9 days ago
А сможете код примера в архиве загрузить? Спасибо заблаговременно!
Vardges Qeshishyan 2 months ago
Спасибо за задание, А что если охото зделать smart pagination к примеру << < 123.789. > >>
TheCrushmix 2 months ago
Не выходит запустить этот код. У вас способ created не в methods , этак и надлежит быть?
Илья Соколов 20 days ago
Да этак и надлежит быть.
Yaroslav Prt 2 months ago
чувак, я тя умоляю не ЦЕйл, с - это не ЦЕ !!!!!!!!!!!!!!!!!!!!!!!!! пускай будет сейл то лишь не ЦЕ нету воопще ЦЕ аааааааааааааааа (
Christopher 3 months ago
Полезный задание, а будто на счет слайдера изображений на vue, знаю что их уже немало, однако все же , было бы любопытно поглядеть) либо портфолио изображений с внедрением transition group
bobpps 3 months ago
Спасибо огромное!
Free Citizen 3 months ago
Ссылку на начальный код плиз)
Rustem Ibragimov 3 months ago
<template> <div> <ul class= list-group > <li class= list-group-item v-for= (item, index) in collections :key=index> item </li> </ul> <div class= btn-toolbar > <div class= btn-group > <button class= btn btn-primary v-for= (p, index) in pagination.pages :key=index @click= setPage(p) > p </button> </div> </div> pagination.startIndex to pagination.endIndex </div> </template> <script> import lodash from 'lodash' export default data() return data: [1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, ], perPage: 3, pagination: , , components: 'lodash': lodash , computed: collections() return this.paginate(this.data); , methods: setPage(p) this.pagination = this.paginator(this.data.length, p) , paginate(data) return lodash.slice(data, this.pagination.startIndex, this.pagination.endIndex + 1) , paginator(totalItems, currentPage) var startIndex = (currentPage - 1) * this.perPage, endIndex = Math.min(startIndex + this.perPage - 1, totalItems - 1); return curentPage: this.curentPage, startIndex: startIndex, endIndex: endIndex, pages: lodash.range(1, Math.ceil(totalItems / this.perPage) + 1) , created() this.setPage(1); console.log(this.data.length) </script>
Сергей Анохин 3 months ago
Спасибо за задание. Но это не для новичков. Все весьма не понятно. не нехорошо было бы разъяснять подробнее.
Иван Иванов 3 months ago
Видео увлекательное, однако для тех кто весьма, весьма не нехорошо разбирается в этом, Так будто ты типо объясняешь для новичков , то доходчивого разъяснения я этак и не услышал(это этак, этак нужно и всё в таком духе,или выдержки из документаций данных плагинов прочитываешь не вдумываясь что и будто)
Андрей Румянцев 3 months ago
Зачем Lodash, если кушать es5-es6?
Web Developer Blog 3 months ago
Так увлекательнее)
MEC Production 3 months ago
Покажи будто сверстать заказ услуг с подсчётом суммы по помеченным radio boxам
Web Developer Blog 3 months ago
Будет нечто схожее
Эрмек. Султанов 3 months ago
Может сверстаем что нибудь ? Желательно непростой макет ! Пожалуйста )
anixi85 2 months ago
чем подробнее объясняешь тем лучше. ориентируйся на людей которые не весьма разбираются. пускай я сам возле 2,5 лет изучаю интернет, однако хотелось бы обычного и детализированного разъяснения
Эрмек. Султанов 3 months ago
Web Developer Blog С vue js непременно ? Может лучше без ? Не знаю будто другие однако я его не изучал
Web Developer Blog 3 months ago
Ну вот я и говорю, практика верстки и с vue js будет, лишь не очень непростая что б новенькие могли глядеть коих 90% на ютубе
Эрмек. Султанов 3 months ago
Web Developer Blog Да согласен, Но у вас уже был курс по верстке ( обычного макета) и не одинешенек ! Хочется чего-то по тяжелее, и этот курс можно расшибить по 10 минут, лишь уроков больше будет и все. И не знаю будто у кого, однако ко мне приходят познания на реальной практике ! Когда сталкиваюсь с неувязкой в верстке веб-сайта и пробую её разрешить. Это оооооочень любопытно !!!
Web Developer Blog 3 months ago
Ну поглядят 400 человек непростой макет и толку, непростой макет делается намного подольше, люд обожают видео по 10 минут и что б по проще