Jquery

Jquery vue js: Забываем о jQuery с Vue.js (Часть 1) | by Vlad Kopenkin

Содержание

Переход с jQuery на Vue.js

Об авторе

Сара Дрезнер — заслуженный спикер и senior разработчик в Microsoft, автор статьей о трюках и хитростях CSS.

Нельзя просто так упустить все интриги, возросшие вокруг существующий JavaScript — фреймворков, но также не стоит забывать, что они явно не являются универсальными и каждый тип проекта требует что-то «свое». Возможно, вы не захотите устанавливать большое количество различных дополнений, чтобы просто реализовать небольшую абстракцию. Возможно, адаптация проекта под новые системы сборки, различные методы деплоя будет означать большое количество времени и усилий, которые вы будете не в состоянии включить в прайс клиенту. Возможно, вы не хотите писать в HTML JavaScript. Список может расти до бесконечности.

Что многие люди могут не знать, так это то, что вы можете легко внедрить Vue.js в ваш проект точно так же, как вы внедряете jQuery. Не нужно ничего перестраивать. Vue достаточно гибкий — в том плане, что вы можете его использовать прямо в HTML.

Итак, представим, что ваш код имеет следующий вид:

Вы можете в буквальном смысле изменить скрипт-тег и продолжить использовать HTML & JS точно так же, как вы использовали его до этого. Вам не нужно ничего переписывать. Вам не нужно интегрировать веб-паки. И вам определенно не нужно устанавливать никаких криповых чудовищ.

Вы можете заменить тэги и оставить разметку «как есть». Что радует, так это несказанная простота, гибкость и адаптируемость Vue.js, что вы можете увидеть на протяжении чтения данной статьи. Что же касательно размера, тут нас тоже ждет приятная особенность: всего лишь 86 КБ для версии 2.5.3 и 87 для более новой версии 3.2.1.

Давайте рассмотрим некоторые наиболее распространенные примеры использования нового фреймворка и убедимся в его неоспоримых преимуществах.

Перехват пользовательского ввода

Наиболее распространенным примером использования JavaScript  является отлавливание введенной пользователем в веб-формы информации. В нашем примере для упрощения мы не будем рассматривать комплексные формы, но для понимания этого будет целиком достаточно.

Чтобы отловить информацию, вводимую пользователем, мы можем сделать следующее:

Я использую этот пример, потому что он наглядно демонстрирует некоторые сильные стороны Vue.js. Он реализует особенности react, что делает его очень чуствительным в плане изменений. Демонстрацию вы можете увидеть, когда попытаетесь ввести что-то. Как можно заметить, вся информация обновляется практически мгновенно.

Вы также можете заметить это и в версии с JQuery — контролируя элементы DOM-дерева и работая с событиями, вызываемыми при изменении содержания его элементов.

В версии Vue.js мы сохраняем состояние элемента. Если более детально, то мы привязываем к нашему конечному скрипту DOM-элемент напрямую. Особенность в том, что даже в случае изменения структуры DOM-дерева и HTML в целом, конкретный DOM-элемент будет надежно привязан к нашему Vue.js — событию. Де-факто, на вводе мы используем атрибут v-model, тем самым обозначая хранение информации этого поля в JavaScript.

Однако это далеко не единственный способ хранения состояния. Потому двигаемся дальше.

Хранение введенных данных в рамках индивидуального события

Особенность работы Vue.js заключается в том, что нам не нужно думать об особенностях реализации конкретного DOM-события. По сути, мы уже знаем, что мы желаем «перехватить». Мы просто указываем событию, на который из элементов срабатывать. Тогда как с использованием JQuery мы жестко привязываемся к структуре DOM и прочим DOM-событиям. Увидеть разницу мы сможем в следующем примере:

В этой версии JQuery был упрощен, так как нам не нужно было отлавливать события при каждом нажатии клавиши, но в то же время все остальные условия соблюдены. Наш код в jQuery также будет подобен этому:

«Отловите элемент, просмотрите, что он делает, перехватывайте изменения, обрабатывайте полученные данные.»

Сравним: во Vue мы контролируем все изменения DOM-дерева. Мы привязываемся к конкретным элементам. По сути, мы имеем небольшую абстракцию под названием v-model.lazy. Vue тепер знает, что сохранять состояние данных до того, как были произведены первые изменения, нельзя. Отлично!

Классы

Следующая вещь, которую мы сейчас рассмотрим, является привязкой CSS-классов, так как наш всеми любимый и обожаемый Гугл сообщает, что это также наиболее популярный случай использования jQuery.

Опять же, что мы здесь можем видеть, так это то, что в версии с jQuery мы храним состояние объекта в DOM-дереве. Элемент имеет свой класс, jQuery принимает решение на базе существующего класса, проверяющего привязку к DOM. В версии с Vue мы храним условие и применяем к нему стили в зависимости от состояния этого условия. Мы не обращаемся к DOM за этой информацией, мы храним ее сами.

Мы храним active в данных, кнопка изменяет состояние условия и, в зависимости от условия, применяется к примеру .red. Даже состояния доступа, aria-pressed, сохраняются гораздо быстрее, так как у нас нет необходимости хранить все в vue-скрипте. Мы можем изменять состояние напрямую при помощи слова active.

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

Скрытие и отображение

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

Оба фреймворка успешно справляются с поставленной задачей, но все же и здесь есть свои причины, почему я отдаю предпочтение Vue.js. Vue обладает инструментом под названием Vue devtolls. Это не то же самое, что Chrome devtools, но когда я их использую, я получаю больше специфической информации, связанной непосредственно с Vue.js

И в jQuery и в Vue элементы успешно скрываются и появляются вновь. Но что, если что-то пойдет не так? Что, если что-то в нашем коде работает не так, как это было задумано? В случае с jQuery для отладки мы бы скорее всего использовали console.log и были бы таковы.

Это все, конечно, хорошо, но в случае с Vue он сам нам предоставит всю необходимую информацию о нем самом. На пикче ниже мы можем увидеть, как элемент скрывается\появляется и как изменяется его состояние в специальном окне. Если DOM по какой-то причине не будет работать так, как мы от него ожидаем, вся необходимая информация будет легко отображена во Vue.

Что еще мне нравится, так это то, что v-if очень удобно принять в других случаях. Я могу использовать v-show, если вещь будет скрыватся и отображатся часто: v-if полностью «демонтирует» элемент, тогда как v-show просто изменит видимость. Это достаточно важно, так как позволяет улучшить производительность. Я легко могу установить целые каскады условий, в то время как повторить подобное с jQuery — слегка затруднительно.

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

Передача формы

Так уж исторически сложилось, что отправка формы посредством Ajax является наиболее «каноничным» примером использования jQuery. А потому мы просто обязаны рассмотреть альтернативу. На самом деле, Vue не обладает встроенными вещами навроде Ajax. Обычно вместо этого здесь используется Axious (js-библиотека для генерации http-запросов).

Этот пример будет несколько более сложным, чем предыдущие. Мы собираемся произвести следующее:

  • До начала ввода в форму клавиша будет серой. После чего она примет «активный» класс и станет голубой.
  • Когда мы отправляем форму, страница не будет перезагружаться.
  • Как только форма принята, мы отобразим ответ на странице.

Здесь за управление классом клавиши отвечают строки 2-10. Похоже на то, что мы делали ранее.  Мы передаем в параметр под названием событие форму и говорим event.preventDefault(), дабы запретить перезагрузку страницы. После чего мы собираем всю информацию с формы и отправляем через Ajax запрос (.done()).

В версии Vue мы биндим поля через v-model. Мы проверяем имена для связки с классом. Вместо передачи информации и загрузки страницы event.preventDefault(), нам всего лишь нужно написать @submit.prevent в нашем элементе формы. Для передачи запроса же мы используем Axious.

Конечно, так же можно произвести и валидацию, отлавливание ошибок, тесты и так далее. Но для понимания логики работы с Vue, как мне кажется, достаточно и этих небольших примеров.

И в заключение

Нет ничего плохого в том, чтобы продолжать использовать jQuery. Цель этой статьи — всего лишь показать, что Vue так же хорош в качестве некой такой абстракции для небольших сайтов. Этот фреймворк оптимален в размерах, прост  в работе и освоении, достаточно тривиален и прекрасно интегрируется в HTML & JS без необходимости перестраивать приложение.

Благодаря гибкости Vue передача кода на стадию билда и общая компонентная структура не являются чем-то сложным. На самом деле — это очень даже весело. Попробуйте сами! Вы можете скаффолдить весь Vue на уровне продакшена просто при помощи пары терминальных команд. Подобным образом вы можете работать с отдельными компонентами, не трогая HTML & JS. Вам не нужно менять конфигурацию вашего веб-пака, разве что вы не захотите сделать что-то специфическое.

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

Удачи в разработке!

Автор перевода: Евгений Лукашук

Источник

Переход с jQuery на Vue.js Зачем, как и что из этого вышло

Опубликовано: 25 Июн 2019

Вернуться в блог

Меня зовут Сергей, я работаю в Студии Флаг с 2017 года и, когда я пришел, состояние фронтенда оставляло желать лучшего.

Введение

Меня зовут Сергей, я работаю в Студии Флаг с 2017 года и, когда я пришел, состояние фронтенда оставляло желать лучшего. Если CSS хоть как-то собирался, был разбит на модули, то на некоторых проектах весь JavaScript хранился в одном файле длиной несколько тысяч строк, не минифицировался, и периодически встречались комментарии типа «Не лезь, оно тебя сожрет». В другом месте JS-функция иногда возвращала “trulio” вместо true. Большая часть кодовой базы была написана на jQuery, что тоже не упрощало работу.

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

Постепенно, мы занялись созданием сборки фронтенда, начали с минификации (сжатия) и транспиляции (трансформации кода таким образом, чтобы он работал в старых браузерах) JavaScript с помощью популярного сборщика Gulp. Позже стали разбивать код на модули. С 2017 года мы начинали постепенно внедрять php-фреймворк Laravel. Кстати, создатели Laravel (Taylor Otwell) и Vue.js (Evan You) много общаются и выступают на конференциях друг у друга.

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

Почему Vue

Vue.js – это прогрессивный фреймворк для создания пользовательских интерфейсов. Создателем Vue.js является Evan You, бывший сотрудник Google и Meteor Dev Group. Начал он разрабатывать фреймворк в 2013-м, а в феврале 2014-го состоялся первый публичный релиз.

Почему мы выбрали именно его?

Во-первых, Vue.js реактивен, и это его основное преимущество перед jQuery, который мы использовали ранее. Это значит, что изменение данных вызывает автоматический ререндеринг в тех местах, где они выводятся. Это позволяет писать меньше кода,  упрощает разработку и увеличивает читабельность кода.

Во-вторых, Vue довольно легко интегрируется с Laravel, backend-фреймворком, который мы используем.

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

Немаловажным является то, что фреймворк имеет доступную документацию(в том числе на хорошем русском языке).
Vue.js появился позже Angular и React, и, как обещали разработчики, взял лучшее от обоих. На тот момент он уже начал обгонять React по звездочкам на GitHub, и в рейтинге любви разработчиков имел позиции не ниже, чем React. Совокупность этих факторов привела к выбору Vue.js, который мы начали внедрять с начала 2018 года, и еще ни разу не пожалели об этом.

Использование Vue.js

Для изучения Vue.js требуется базовое знание HTML, CSS, JavaScript, желательно знание стандарта ES6 и выше. Vue поддерживает все современные браузеры и даже Internet Explorer 9-11 и весит всего около 20 кб (min + gzip).

Для старта простого проекта на Vue.js достаточно скачать JS-файл и подключить его на страницу с помощью тега <script>. Будет зарегистрирована глобальная переменная Vue. Также существует Vue CLI – инструмент, с помощью которого можно быстро развернуть проект, и использовать все продвинутые возможности Vue (о них расскажу далее) без потери времени на настройку конфигов систем сборки фронтенда. Мы же на своих проектах используем Webpack + Laravel Mix (пакет для Laravel, позволяющий быстро настраивать Webpack).

Основные концепции

Основными концепциями Vue являются:

  • конструктор
  • компоненты
  • директивы
  • переходы

Конструктор

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

Компоненты

Ключевое правило при разработке сложных вещей: «Никогда не делайте сложные вещи». Если что-то становится сложным – разбиваем это на части попроще и связываем их наиболее очевидным способом. Любой сложный интерфейс нужно делить на компоненты – сущности, для которых мы можем максимально однозначно и понятно указать, что это такое и что оно умеет делать.

Компоненты помогают расширить основные html элементы и внедрить переиспользуемый код. По сути, компоненты — повторно используемые части UI. На этапе проектирования мы разбиваем наше приложение на независимые части и получаем древовидную структуру компонентов. В примере ниже можно увидеть пример Vue-компонента — счетчика кликов, который можно вставить на страницу несколько раз и все реализации этого счетчика будут работать независимо друг от друга.

jQuery

Для jQuery тоже можно найти плагины, для реализации компонентного подхода, однако их почти никто не использует на практике.

Директивы

Директивы используются для добавления дополнительной функциональности html-элементам. Все директивы имеют префикс «v-». С их помощью можно добавлять обработчики событий, управлять отображением элементов, передавать данные и многое другое.

Например, в примере ниже элементу добавляется класс “active”, если переменная isActive возвращает “true”.

jQuery

В jQuery для реализации подобной функциональности пришлось бы добавить класс или id к этому элементу (хорошо, если он еще будет с префиксом js—), после этого обратиться к этому элементу и при изменении переменной isActive добавлять или убирать класс.

Переходы

Vue дает возможность самым разным образом анимировать переходы при обновлении объектов DOM, а также при их добавлении и удалении. Его инструменты дают возможность:

  • автоматически применять CSS-классы для анимаций и переходов
  • интегрировать сторонние библиотеки CSS-анимаций, такие как Animate.css
  • использовать JavaScript для работы с DOM напрямую в хуках переходов
  • интегрировать сторонние библиотеки JavaScript-анимаций, такие как Velocity.js
jQuery

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

Отладка

Для отладки используется расширение для браузера vue-devtools, которое позволяет видеть компонентную структуру проекта. Это расширение позволяет отслеживать состояние каждого компонента, реактивно менять данные в нем, изменяя его состояние. Также в нем присутствуют возможности для отладки Vue Router и Vuex, о которых расскажу чуть позже.

Скриншот интерфейса Vue-devtools представлен ниже.

jQuery

Для jQuery также существует расширение для отладки, однако его возможностей часто бывает недостаточно.

Однофайловые компоненты

Для того, чтобы проект было легко масштабировать и отлаживать рекомендуется использовать однофайловые компоненты Vue, которые являются одной из киллер-фич фреймворка. При такой организации кода каждый компонент – это отдельный файл, который имеет три части: разметку, скрипт и стили. Это очень удобно – видеть всю логику компонента в одном файле. Причем писать можно на любом удобном вам препроцессоре (SASS, PostCSS, …) и языке, компилирующимся в JS (CoffeeScript, TypeScript). На иллюстрациях ниже можно увидеть пример такого компонента. В примере сперва идет HTML-разметка, затем JavaScript и, наконец, стили CSS. Все рядом, в одном файле, удобнее уже некуда!

jQuery

В jQuery такой реализации компонентного подхода нет.

Vuex

Сложность больших приложений нередко возрастает из-за распределения кусочков состояния по многим компонентам и связям между ними. Представьте, что вы работаете над большим веб-приложением с десятками маршрутов и компонентов. Будет не очень удобно передавать данные между компонентами, поскольку их много и легко запутаться в том, какие данные нужны конкретному компоненту.

Для решения этой проблемы Vue предлагает Vuex. Vuex – это паттерн и библиотека управления состоянием для приложений на Vue.js. Он позволяет хранить данные в одном месте в виде JSON-объекта, что упрощает работу при разработке больших приложений.

jQuery

Если снова вспомнить про jQuery, то подобных встроенных инструментов управления состоянием приложения он не имеет.

SPA

Для создания SPA (Single Page Application) предусмотрен модуль VueRouter. SPA – это веб-приложение, работающее на одной странице. На SPA-сайте при переходах между URL-адресами страница не перезагружается, а обновляется только то, что должно обновиться. Большая часть работы сайта производится на стороне клиента, а если нужно получить данные с сервера, то это обычно делается с помощью ajax.

В обычных сайтах очень часто можно встретить загрузку одного и того же содержимого. Например, шапка сайта, футер, меню и другие элементы, которые не меняются от страницы к странице, тем не менее, каждый раз загружаются с сервера. С использованием SPA подхода такой проблемы просто не будет, т.к. контент будет подгружаться по мере необходимости, что значительно повысит скорость работы приложения. Пример SPA-сайта: https://meduza.io/

Vue Router имеет мощные возможности по управлению роутингом приложения, и при этом доступную документацию. Она глубоко интегрируется с Vue.js и позволяет легко создавать SPA-приложения. Включает следующие возможности:

  • Вложенные маршруты/представления;
  • Модульная конфигурация маршрутизатора;
  • Доступ к параметрам маршрута, query, wildcards;
  • Анимация переходов представлений на основе Vue.js;
  • Удобный контроль навигации;
  • Автоматическое проставление активного CSS класса для ссылок;
  • Режимы работы HTML5 history или хэш, с автопереключением в IE9;
  • Настраиваемое поведение прокрутки страницы.

Есть инструменты и для серверного рендеринга HTML страниц.

jQuery

При желании, можно сделать SPA и на jQuery, однако все, что описано выше придется создавать самому или использовать для этого сторонние библиотеки.

Vuetify

Для того, чтобы быстро собрать приложение можно использовать набор готовых компонентов – Vuetify. Он соответствует концепции дизайна Material Design. С его помощью можно как использовать некоторые UI-элементы (селекты, датапикеры), так и готовые темы интерфейсов.
Ниже можно увидеть форму авторизации Vuetify.

jQuery

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

Заключение

Таким образом, Vue предоставляет обширные возможности для разработчиков. С ним очень легко начать работать, даже если до этого вы не использовали JavaScript-фреймворки и постепенно двигаться от простого к сложному на реальных проектах. При использовании однофайловых компонентов вы получаете приложение с чистым кодом, разбитым на модули, которое легко масштабировать.

Вы можете начать создавать SPA и удобно управлять состоянием с помощью Vue Router и Vuex, а также использовать готовый набор компонентов Vuetify. А еще у Vue есть набор фирменных эмоджи! Мы работаем с Vue.js больше года, и за это время убедились, что как фреймворк, он удовлетворяет все наши потребности и стимулирует изучать новое и двигаться вперед.

Всем Vue!



Последние записи блога


Please enable JavaScript to view the comments
powered by Disqus.

Vue.js или JQuery. Что лучше выучить? На чем делать проекты?

Что учить первым: Vue или JQuery

JavaScript. Сначала учите обычный JavaScript. Если Вы не знаете его хотя бы на нормальном базовом уровне, не знакомы со стрелочными функциями, промисами и прототипами, пожалуйста, закройте эту статью.

Автор статьи – не брюзгливый старик, который ноет на каждом шагу о том, что “база наше все”. Просто базовое понимание JavaScript позволит Вам лучше понимать работу самых популярных фреймворков. Ну и без того же знания промисов и асинхронных функций нет смысла лезть во Vue, ведь Вы просто не почувствуете полной мощи инструмента, а простые сайты можно делать и дальше на JQuery.

Вы уже знаете JavaScript

Тогда все еще проще, смотрите.

Vue.js

Vue – это молодой фреймворк (инструмент для разработки), который создан людьми, вдохновившимися Angular. Vue используют для сложных веб-приложений (SPA и PWA), потому что с его помощью легко создавать реактивные сайты, работать с виртуальным DOM-деревом, работать с графикой, создавать мобильные приложение. Если хотите создавать красивые и сложные программы, реактивные сайты – это Ваш выбор.

Популярность Vue в Российском сегменте интернета низкая. Встретить сайт работающий на Vue, который надо “доработать” – это как встретить сайт с бэкендом на C# и Python. Мы сейчас никого не обижаем, а просто говорим, что таких проектов очень и очень мало. Но это пока что.

Если Вы хотите выйти на фриланс или пойти работать в среднестатистическое агентство, навряд ли там пригодятся знания Vue. Особенно в ближайшие 2-3 года. Итог тут такой: если Вы не хотите делать всю жизнь обычные сайтики, то учите Vue. А если только начинаете работать в веб-разработке, учите JQuery. Он и намного проще Vue.js.

JQuery

Старая и простая библиотека (набор готового кода), которая отлично подойдет веб-разработчику для “оживления” своего сайта, если из функционала надо реализовать: слайдер, ajax-форму, модальные окна, аккордеоны, post/get запросы и прочие простенькие эффекты.

Эффект аккордеон.

JQuery используют, наверное, в 80% проектах всего Рунета (цифра из головы, но, правда, очень много). Почти все сайты написаны с использование JQuery, да даже многие плагины на WordPress используют эту библиотеку.

Отличный выбор для простого сайта.

На чем делать проекты

Если Вы до сих пор не увидели ответа, давайте прямо подведем итог: все зависит от будущего функционала проекта.

Если Вы будете разрабатывать сложное веб-приложение (как ozon, веб-версия discord и skype) где будет много интерактива, графики и взаимодействий с виртуальным DOM-деревом, или вообще захотите себя попробовать в мобильной разработке – учите Vue.

Если Вы в первую очередь хотите делать сайты и единственные взаимодействия, это работа с HTML (слайдеры, ajax-запросы, события на клики), то иррационально подключать здесь такую мощную библиотеку, как Vue. Учите и используйте JQuery.

Рассказать друзьям:

Drupal и vue.js: как работать без jquery

Вольный перевод: https://www.adcisolutions.com/knowledge/drupal-vuejs-how-work-without-jq…

Начиная с 5-ой версии, Drupal содержит jQuery.
Это замечательный инструмент для разработчика. Был)
В настоящее время мы сталкиваемся с массой задач, проблем, которые эта библиотека не решает, и не снимает.

Зачем обращать внимание на Vue.js? О чем пойдет речь в статье?

  1. Как улучшить пользовательский интерфейс без jQuery.
  2. Как работать с компонентами Vue.js.
  3. Как интегрировать Vue.js со сторонними библиотеками.
  4. Как создать простое одностраничное приложение.

Начало

Самый простой способ подключить библиотеку vue.js — используя тег script

<script src="https://unpkg.com/vue"></script>

Кроме этого можно использовать npm пакет или модуль drupal.

Улучшение пользовательского интерфейса

Увы, Drupal не позволяет нам разрабатывать современный реактивный пользовательский интерфейс.
В ядре есть jQuery — но эта либа, не для этих дел)
Попробуем Vue.js для улучшения некоторых пользовательских элементов Drupal.

К примеру, мы хотим показать кнопку «Создать нового пользователя» только тогда, когда заполнены поля «Почта» и «Имя пользователя».

<form enctype=»multipart/form-data» action=»/user/register» method=»post» accept-charset=»UTF-8″>
<div>
 <div>
   <label for=»edit-name»>Username <span title=»This field is required.»>*</span></label>
   <input autocapitalize=»none» type=»text» name=»name» value=»» size=»60″ maxlength=»60″ v-model=»name»>
 </div>
<div>
 <label for=»edit-mail»>Email <span title=»This field is required.»>*</span></label>
<input type=»text» name=»mail» value=»» size=»60″ maxlength=»254″ v-model=»mail»>
</div>
<div><input type=»submit»
name=»op» value=»Create new account» v-show=»name && mail»></div>
</div>
</form>

var app = new Vue({
 el: ‘#user-register-form’,
 data: {
   name: »,
   mail: »,
 }
})

Компоненты Vue.js

Сообщество Vue.js может предложить множество потрясающих компонентов, один из которых попробуем использовать.

Цель, проверить входные данные на стороне клиента, добавим следующее:

<script src=”https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.25/vee-validate.js”></script>

vee-validate это легкий плагин Vue.js, позволяющий проверять поля ввода и отображать ошибки

Изменим элементы ввода

<input autocapitalize=»none» type=»text»
name=»name» value=»» size=»60″ maxlength=»60″ v-model=»name» v-validate.initial=»name»
data-rules=»required|alpha|min:3″>
<input type=»text» name=»mail» value=»» size=»60″ maxlength=»254″
class=»form-text required» v-model=»mail» v-validate.initial=»email»
data-rules=»required|email»>

Как вы видите, использовать Vue.js и ее компоненты для улучшения существующих элементов — не сложно.

Vue.js и другие библиотеки

В этом примере интегрируем jQuery плагин select2 обернув его в свой компонент.

<div></div>

<!— using string template here to work around HTML <option> placement restriction —>
<script type=»text/x-template»>
  <div>
    <p>Selected: {{ selected }}</p>
    <select2 :options=»options» v-model=»selected»>
      <option disabled value=»0″>Select one</option>
    </select2>
  </div>
</script>

<script type=»text/x-template»>
  <select>
    <slot></slot>
  </select>
</script>

Vue.component(‘select2’, {
  props: [‘options’, ‘value’],
  template: ‘#select2-template’,
  mounted: function () {
    var vm = this
    $(this.$el)
      // init select2
      .select2({ data: this.options })
      .val(this.value)
      .trigger(‘change’)
      // emit event on change.
      .on(‘change’, function () {
        vm.$emit(‘input’, this.value)
      })
  },
  watch: {
    value: function (value) {
      // update value
      $(this.$el).val(value).trigger(‘change’);
    },
    options: function (options) {
      // update options
      $(this.$el).select2({ data: options })
    }
  },
  destroyed: function () {
    $(this.$el).off().select2(‘destroy’)
  }
})

var vm = new Vue({
  el: ‘#el’,
  template: ‘#demo-template’,
  data: {
    selected: 2,
    options: [
      { id: 1, text: ‘Hello’ },
      { id: 2, text: ‘World’ }
    ]
  }
});

Vue.js не ведет себя так, как будто она одна на весь сайт (в отличии от React).
Мы можем использовать другие js-компоненты и позволить им работать с Virtual DOM.

Одностраничное приложение

Все что нужно для создания одностраничного приложения — есть в vue-router.

<script src=”https://unpkg.com/vue-router/dist/vue-router.js”></script>
<script src=»https://unpkg.com/vue/dist/vue.js»></script>
<script src=»https://unpkg.com/vue-router/dist/vue-router.js»></script>

<div>
  <h2>Hello App!</h2>
  <p>
    <!— use router-link component for navigation. —>
    <!— specify the link by passing the `to` prop. —>
    <!— <router-link> will be rendered as an `<a>` tag by default —>
    <router-link to=»/foo»>Go to Foo</router-link>
    <router-link to=»/bar»>Go to Bar</router-link>
  </p>
  <!— route outlet —>
  <!— component matched by the route will render here —>
  <router-view></router-view>
</div>

const Foo = { template: ‘<div>foo</div>’ }
const Bar = { template: ‘<div>bar</div>’ }

// Each route should map to a component. The «component» can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We’ll talk about nested routes later.
const routes = [
  { path: ‘/foo’, component: Foo },
  { path: ‘/bar’, component: Bar }
]

// You can pass in additional options here, but let’s
// keep it simple for now.
const router = new VueRouter({
  routes // short for routes: routes
})

// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount(‘#app’)

Заключение

Как мы уже убедились — Vue.js прост в использвании, и полезен для проектов любого масштаба.
Надеюсь, после прочтения статьи, вы начнете удовлетворять свое любопытство на практике.
Сылки ниже могут быть полезны.

http://vuejs.org/
https://www.npmjs.com/package/vue
https://www.drupal.org/project/vuejs
http://about.gitlab.com/2016/10/20/why-we-chose-vue/
https://github.com/jcottrell/vue-example-contact-form
https://medium.freecodecamp.com/vue-js-introduction-for-people-who-know-…

Web-разработка • JavaScript и jQuery


Vue.js — это Open Source веб-фреймворк для создания пользовательских интерфейсов на JavaScript. С его помощью можно создавать динамические сайты и сложные одностраничные веб-приложения. Перед началом работы с Vue надо установить Node.js и менеджер пакетов npm. Для создания vue-проекта нам потребуется установить пакет vue-cli.

Создание нового проекта


Запускаем интерпретатор команд от имени администратора:

> npm install -g @vue/cli


Создаем директорию для проектов Vue:

> mkdir C:/vuejs
> cd C:/vuejs


И создаем первый проект:

> vue create hello


На первом экране будет три пункта:

Vue CLI v4.5.9
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features


Мы выбираем первый пункт — Vue 2-ой версии с двумя плагинами. Babel преобразует код на ES6 (ES-2015) в код на предыдущем стандарте ES5, чтобы его понимали старые версии браузеров. ESLint позволяет проводить анализ качества кода, написанного на любом выбранном стандарте JavaScript.


При выборе последнего пункта можно вручную настроить конфигурацию и потом сохранить для дальнейшего использования. Можно выбрать версию Vue, в какой момент и как именно проверять качество кода, где хранить конфигурацию проекта — в отдельных файлах (In dedicated config files) или в одном файле (In package.json).



В конце можно сохранить свои настройки для дальнейшего использования — например, под именем MySettings. При создании нового проекта будет уже не три пункта, а четыре — первым будет наш MySettings.



Настройки сохраняются в файле C:/Users/Evgeniy/.vuerc:

{
  "useTaobaoRegistry": false,
  "presets": {
    "MySettings": {
      "useConfigFiles": false,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      },
      "vueVersion": "2"
    },
  }
}


Посмотреть сохраненные настройки можно с помощью команды

> vue config


Для редактирования настроек предназначена команда

> vue config --edit


Переходим в директорию проекта и запускаем сервер

> cd C:/vuejs/hello
> npm run serve


Открываем в браузере страницу http://localhost:8080/


Как работает приложение


Любое сложное приложение всегда можно разбить на небольшие части. Каждая такая часть — это компонент, реализующий какой-то функционал. Компонентный подход позволяет избежать мешанины кода и чётко выстраивать архитектуру приложения. Каждую из частей при выделении в компонент проще поддерживать, а при необходимости повторять разбиение внутри компонента на ещё меньшие части.



Для удобной организации компонентов и их составляющих используются vue-файлы, которые состоят из трех частей:

  • <template> — шаблон компонента
  • <script> — логика компонента
  • <style> — стили компонента


В нашем приложении есть главный компонент App.vue, с которого все начинается. И этот компонент подключает остальные, которые расположены в директории components — например, компонент HelloWorld.vue.

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


Теперь создадим компонент HelloWorld.vue в директории components:

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

<style>
.hello-world {
  color: #ff0000;
}
</style>

События жизненного цикла


Vue даёт возможность создавать обработчики для событий жизненного цикла компонентов. Это означает, что можно прослушивать события вроде created, mounted и destroyed. При возникновении события можно организовать выполнение некоего кода.

<template>
  <div>
    <p>Сообщение {{ message }}</p>
    <p>Дата и время {{ now }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello, World!',
      now: new Date(),
    }
  },
  methods: {
    updateDate() {
      this.now = new Date();
    },
  },
  mounted() {
    setInterval(() => {
      this.updateDate();
    }, 1000);
  },
}
</script>

<style>
.hello-world {
  color: #ff0000;
}
</style>


Теперь время в браузере обновляется каждую секунду.

Передача данных в компоненты


Свойства props позволяют передавать данные из родительского компонента в дочерний. Допустим, у нас есть компонент Publication.vue, который показывает статью (публикацию). Все данные о статье — автор, адрес почты, заглоловок и текст — компонент получает от родителя. Корневой компонент App.vue передает объекты author и article компоненту Publication.vue, где одни будут доступны как свойства (props) owner и content.

<template>
  <div>
    <Publication :owner="author" :content="article"></Publication>
  </div>
</template>

<script>
import Publication from './components/Publication.vue'

export default {
  name: 'App',
  data() {
    return {
      author: {
        name: 'Сергей Иванов',
        mail: '[email protected]'
      },
      article: {
        head: 'Передача данных в компоненты',
        body: 'Свойства позволяют передавать данные из родительского компонента в дочерний.'
      }
    }
  },
  components: {
    Publication,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
<template>
  <div>
    <p>{{ author.name }}: {{ owner.name }}</p>
    <p>{{ author.mail }}: {{ owner.mail }}</p>
    <h2>{{ article.head }}: {{ content.head }}</h2>
    <div>{{ article.body }}: {{ content.body }}</div>
  </div>
</template>

<script>
export default {
  name: 'Publication',
  data() {
    return {
      author: {
        name: 'Автор статьи',
        mail: 'Почта автора'
      },
      article: {
        head: 'Заголовок статьи',
        body: 'Содержимое статьи'
      }
    }
  },
  props: ['owner', 'content']
}
</script>

<style scope>
.publication {
  color: #ff0000;
}
</style>

Поиск:
JavaScript • Web-разработка • Теория • Установка • Фреймворк • cli • vue

Умерла ли библиотека jQuery — Разработка на vc.ru

Этот вопрос разжигает дискуссии в мире разработчиков.

6139

просмотров

Почему считают, что jQuery мёртв

Потому что с появлением Vue.js, React, Angular сложные задачи стали простыми. Попробуйте сделать фильтр на jQuery, зависимый от поведения пользователя контент либо сложную анимацию — уверен, у вас возникнут трудности.

Стоит ли использовать библиотеку jQuery

Смотря для каких задач. Если вам надо сделать слайдер, валидацию формы или простую анимацию, то используйте jQuery. В других случаях — Vue.js, React, Angular.

Как долго jQuery будет жив

Более 80% плагинов написаны на этой библиотеке, более 85% сайтов используют jQuery. Я считаю, что библиотека будет жить минимум пять лет. По мере развития нативного JavaScript развивается и jQuery.

Спасибо за внимание! Жду ваших яростных комментов 🙂

{
«author_name»: «Павел Шаламов»,
«author_type»: «self»,
«tags»: [«\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438»],
«comments»: 17,
«likes»: 9,
«favorites»: 6,
«is_advertisement»: false,
«subsite_label»: «dev»,
«id»: 73512,
«is_wide»: true,
«is_ugc»: true,
«date»: «Sun, 30 Jun 2019 23:39:27 +0300»,
«is_special»: false }

{«id»:319855,»url»:»https:\/\/vc.ru\/u\/319855-pavel-shalamov»,»name»:»\u041f\u0430\u0432\u0435\u043b \u0428\u0430\u043b\u0430\u043c\u043e\u0432″,»avatar»:»8b4548b9-ec9a-bc33-a52c-8f6e05ea5a76″,»karma»:19,»description»:»»,»isMe»:false,»isPlus»:false,»isVerified»:false,»isSubscribed»:false,»isNotificationsEnabled»:false,»isShowMessengerButton»:false}

{«url»:»https:\/\/booster.osnova.io\/a\/relevant?site=vc»,»place»:»entry»,»site»:»vc»,»settings»:{«modes»:{«externalLink»:{«buttonLabels»:[«\u0423\u0437\u043d\u0430\u0442\u044c»,»\u0427\u0438\u0442\u0430\u0442\u044c»,»\u041d\u0430\u0447\u0430\u0442\u044c»,»\u0417\u0430\u043a\u0430\u0437\u0430\u0442\u044c»,»\u041a\u0443\u043f\u0438\u0442\u044c»,»\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c»,»\u0421\u043a\u0430\u0447\u0430\u0442\u044c»,»\u041f\u0435\u0440\u0435\u0439\u0442\u0438″]}},»deviceList»:{«desktop»:»\u0414\u0435\u0441\u043a\u0442\u043e\u043f»,»smartphone»:»\u0421\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u044b»,»tablet»:»\u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b»}},»isModerator»:false}

Блоги компаний

Еженедельная рассылка

Одно письмо с лучшим за неделю

Проверьте почту

Отправили письмо для подтверждения

Vue и jquery в примерах

Простые примеры реализации различных «фич» на jquery и vue.js

Ниже собрана часть по наиболее популярным и “избитым приемам”, благодаря которым можно в значительной степени понять работу vue.js. Первым — идет пример на jquery, вторым — на vue

Забираем значения из инпута

Реализация на jQuery

<div>
<iframe scrolling=»no» title=»jQuery capture information from a form input- on enter » src=»//codepen.io/vedees/embed/preview/BbLOYg/?height=265&theme-id=light&default-tab=js,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/BbLOYg/’>jQuery capture information from a form input- on enter </a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Реализация на Vue.js

<div>
<iframe scrolling=»no» title=»Vue capture information from a form input — on enter» src=»//codepen.io/vedees/embed/preview/qvaMox/?height=265&theme-id=light&default-tab=html,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/qvaMox/’>Vue capture information from a form input — on enter</a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Динамичная обработка input

Реализация на jQuery

<div>
<iframe scrolling=»no» title=»jQuery Capture Information From a Form Input» src=»//codepen.io/vedees/embed/preview/qvqGJg/?height=265&theme-id=light&default-tab=js,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/qvqGJg/’>jQuery Capture Information From a Form Input</a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Реализация на Vue.js

<div>
<iframe scrolling=»no» title=»Vue capture information from a form input» src=»//codepen.io/vedees/embed/preview/drOEQE/?height=265&theme-id=light&default-tab=html,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/drOEQE/’>Vue capture information from a form input</a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Toggle — переключение css классов

Реализация на jQuery

<div>
<iframe scrolling=»no» title=»Toggle Class jQuery» src=»//codepen.io/vedees/embed/preview/drOEdr/?height=265&theme-id=light&default-tab=js,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/drOEdr/’>Toggle Class jQuery</a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Реализация на Vue.js

<div>
<iframe scrolling=»no» title=»Toggle Class Vue» src=»//codepen.io/vedees/embed/preview/LaboQM/?height=265&theme-id=light&default-tab=html,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/LaboQM/’>Toggle Class Vue</a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Показать или скрыть элемент по клику (Show — Hide)

Реализация на jQuery

<div>
<iframe scrolling=»no» title=»jQuery show hide» src=»//codepen.io/vedees/embed/preview/oVYROR/?height=265&theme-id=light&default-tab=js,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/oVYROR/’>jQuery show hide</a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Реализация на Vue.js

<div>
<iframe scrolling=»no» title=»Vue show hide» src=»//codepen.io/vedees/embed/preview/zboQQm/?height=265&theme-id=light&default-tab=html,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/zboQQm/’>Vue show hide</a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Показать или скрыть кнопку (if-else)

Реализация на jQuery

<div>
<iframe scrolling=»no» title=»Show button based on content jQuery » src=»//codepen.io/vedees/embed/preview/QoGXbq/?height=265&theme-id=light&default-tab=css,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/QoGXbq/’>Show button based on content jQuery </a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Реализация на Vue.js
<div>
<iframe scrolling=»no» title=»Show button based on content Vue » src=»//codepen.io/vedees/embed/preview/pYNXjL/?height=265&theme-id=light&default-tab=js,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/pYNXjL/’>Show button based on content Vue </a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Списки (Comparision)

Реализация на jQuery

<div>
<iframe scrolling=»no» title=»Comparision — jquery» src=»//codepen.io/vedees/embed/preview/GerZzg/?height=265&theme-id=light&default-tab=js,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/GerZzg/’>Comparision — jquery</a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Реализация на Vue.js
<div>
<iframe scrolling=»no» title=»Comparision — Vue» src=»//codepen.io/vedees/embed/BbpKvK/?height=265&theme-id=light&default-tab=js,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/BbpKvK/’>Comparision — Vue</a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Отправка данных с форм

Реализация на jQuery и AJAX

<div>
<iframe scrolling=»no» title=»jQuery Form Submission AJAX» src=»//codepen.io/vedees/embed/preview/bZBPER/?height=265&theme-id=light&default-tab=js,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/bZBPER/’>jQuery Form Submission AJAX</a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Реализация на Vue.js

<div>
<iframe scrolling=»no» title=»Vue Form Submission» src=»//codepen.io/vedees/embed/preview/Rdozar/?height=265&theme-id=light&default-tab=js,result» frameborder=»no» allowtransparency=»true» allowfullscreen=»true»>
See the Pen <a href=’https://codepen.io/vedees/pen/Rdozar/’>Vue Form Submission</a> by vedees
(<a href=’https://codepen.io/vedees’>@vedees</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>
</div>

Курс по Vue.js — С НУЛЯ ДО ПРО:

Овладей трендовым фреймворком в курсе vue.js — с нуля до про:

  • 6 современных приложений для вашего портфолио и GitHub
  • Курс нацелен на успешное прохождение интервью и дальнейшее трудоустройство
  • 0% воды и 100% практикеских примеров, которые действительно пригодятся в работе
  • Именной сертификат об окончании курса

<a href=»/courses/vuejs-s-nylya-do-pro»>Узнать больше!</a>

Как (безопасно) использовать подключаемый модуль jQuery с Vue.js

Использовать jQuery и Vue.js в одном пользовательском интерфейсе — не лучшая идея. Не делайте этого, если можете этого избежать.

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

Если вы будете осторожны с тем, как вы это делаете, вы можете безопасно использовать jQuery и Vue вместе.В этой статье я собираюсь продемонстрировать, как добавить плагин jQuery UI Datepicker в проект Vue.

И, чтобы немного похвастаться, я даже собираюсь отправлять данные между этим плагином jQuery и Vue!

Посмотрите, как он работает в этом JS Bin.

jQuery UI Datepicker

Проблема совместного использования jQuery и Vue

Почему это потенциально опасно?

Vue — это ревнивая библиотека в том смысле, что вы должны позволить ей полностью владеть патчем DOM, который вы ей даете (определяется тем, что вы передаете в el ).Если jQuery вносит изменения в элемент, которым управляет Vue, скажем, добавляет к чему-либо класс, Vue не узнает об изменении и будет сразу же перезаписывать его в следующем цикле обновления.

Решение: использование компонента в качестве оболочки

Зная, что Vue и jQuery никогда не собираются совместно использовать часть DOM, мы должны сказать Vue оцепить область и передать ее jQuery.

Использование компонента для обертывания плагина jQuery кажется подходящим вариантом, потому что:

  • Мы можем использовать хуки жизненного цикла для установки и разрыва кода jQuery.
  • Мы можем использовать интерфейс компонента для связи с остальной частью приложения Vue через свойства и события.
  • Компоненты могут отказаться от обновлений с помощью v-once

Настройка jQuery UI Datepicker

Очевидно, вам сначала нужно включить в свой проект библиотеки пользовательского интерфейса jQuery и jQuery. Как только они у вас есть, datepicker просто требует, чтобы элемент input прикрепился к:

Затем его можно создать, выбрав его и вызвав метод:

Компонент Datepicker

Чтобы сделать наш компонент datepicker, шаблон будет таким: input element:

Примечание. Этот компонент должен быть не чем иным, как оберткой для плагина.Не испытывайте удачу и не давайте ему каких-либо свойств данных, использования директив или слотов.

Создание экземпляра виджета

Вместо того, чтобы давать нашему входу идентификатор и выбирать его, мы можем использовать this. $ El , поскольку каждый компонент может получить доступ к своему собственному корневому узлу таким образом. Корневым узлом, конечно же, будет вход .

Затем мы можем заключить ссылку на узел в селектор jQuery, чтобы получить доступ к методу datepicker , то есть $ (this.$ el) .datepicker () .

Обратите внимание, что мы используем обработчик жизненного цикла , смонтированный, , как this. $ El не определен до тех пор, пока компонент не смонтирован.

Разборка

Чтобы разобрать datepicker, мы можем использовать аналогичный подход и использовать ловушку жизненного цикла. Обратите внимание, что мы должны использовать beforeDestroy , чтобы убедиться, что наш вход все еще находится в DOM и, следовательно, может быть выбран (он не определен в хуке destroy ).

Пройти конфигурацию с реквизитом

Чтобы сделать наш компонент многоразовым, было бы неплохо разрешить настраиваемую конфигурацию, например, указав формат даты с помощью свойства конфигурации dateFormat .Мы можем сделать это с помощью пропсов :

Разрешение jQuery обрабатывать обновления

Предположим, что вместо того, чтобы передавать свойство dateFormat в виде строки, вы сделали его свойством data вашего корневого экземпляра, то есть:

Это будет означать, что dateFormat будет свойством реактивных данных. Вы можете обновить его значение в какой-то момент в жизни вашего приложения:

Поскольку свойство dateFormat является зависимостью от установленного хука компонента datepicker , его обновление приведет к повторному рендерингу компонента.Это было бы не круто. jQuery уже настроил ваш datepicker на входе и теперь управляет им с помощью собственных пользовательских классов и прослушивателей событий. Обновление компонента приведет к замене входа и, таким образом, настройки jQuery будут немедленно сброшены.

Нам нужно сделать так, чтобы реактивные данные не могли запускать обновление в этом компоненте.

v-однажды

Директива v-once используется для кэширования компонента в случае, если он имеет много статического содержимого.Фактически это заставляет компонент отказаться от обновлений.

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

Передача данных из jQuery в Vue

Было бы бесполезно иметь средство выбора даты, если бы мы не могли получить выбранную дату и использовать ее где-нибудь еще в приложении. Сделаем так, чтобы после выбора значения оно выводилось на страницу.

Мы начнем с присвоения нашему корневому экземпляру свойства date :

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

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

Спасибо за этот ответ Stack Overflow за вдохновение.

²Как использовать VueJs вместо jQuery | Антонина Савойя | Kaliop

Если вы хотите понять все содержание этой статьи, необходимы некоторые знания VueJs: https: // vuejs.org / v2 / guide /

Я ведущий разработчик Kaliop, и сегодня я говорю о том, как использовать VueJ вместо jQuery.

Для французской версии этой статьи щелкните здесь.

Я открыл для себя VueJs два года назад и с тех пор с удовольствием им пользуюсь. У меня была возможность поработать над тремя проектами VueJs, смешанными с другими технологиями. Но после этого я вернулся к более классическому «backend» проекту, с Symfony, eZPublish, даже Drupal ... и с jQuery для обработки события первого щелчка.

С этим мы можем создавать великие вещи, но мне было грустно без VueJ, и работать было не так весело.

До того момента мне пришлось синхронизировать множество элементов DOM вместе с jQuery в интерактивной корзине для платформы электронной коммерции. Я полностью перегорел, удалил весь свой код и начал все сначала с VueJ всего за одну бессонную ночь. И знаешь, что? С тех пор моя жизнь стала счастливее!

И с того момента я просто хотел использовать VueJ везде и всегда! И я собираюсь показать вам, как этого добиться.

Примечание: показанные примеры не идеальны, их можно реорганизовать и улучшить, но я старался оставаться максимально простым. Весь код и многое другое доступно здесь github.com/Erilan/replace-jQuery-by-vuejs

Во-первых, давайте сравним базовые образцы с jQuery и простой интеграцией VueJs.

Простая интеграция VueJs включает в себя библиотеку vue (например, через CDN), div и небольшой фрагмент скрипта:

Не сложнее, чем интеграция с jQuery!

Во-первых, давайте рассмотрим базовый раскрывающийся список (отображать список элементов при нажатии кнопки):

Здесь версия jQuery короче, чем версия VueJs.Это очень простой пример, он реагирует только на событие щелчка, и мы переключаем класс (jQuery) или переключаем логическое значение (Vue). Версия Vue на самом деле не лучше, но она немного логичнее: у нас есть значение, представляющее состояние нашего раскрывающегося списка, а не только класс.

Теперь давайте взглянем на базовые панели (содержимое отображается при нажатии кнопки):

Здесь снова версия jQuery короче, чем версия VueJs. Опять же, мы реагируем на событие щелчка и играем с классами (jQuery) или устанавливаем переменную (Vue).Как и в предыдущем примере, версия Vue не намного лучше, но более логична. Вместо добавления / удаления классов у нас есть значение состояния, представляющее, какой контент отображается.

Хорошо, перейдем к более сложному примеру: рецепт обслуживает калькулятор

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

В решении VueJs код короче и включает больше логики.У нас есть значение состояния, представляющее номер порции, и каждая строка ингредиента вычисляет его количество. Мы больше не читаем и не пишем DOM, мы просто вычисляем интересные значения, когда это необходимо, наслаждаясь реактивностью VueJ.

Бывают случаи, когда jQuery укорочен, чем Vuejs, но с Vuejs легко добавить истинную логику.

Но теперь, если мы хотим использовать всю мощь Vuejs и использовать компоненты? Мы можем!

Мы можем создавать компоненты «на лету», но писать html в строке javascript часто - плохая идея, и ее нельзя использовать повторно.

Пора углубиться в Webpack! Но это может быть сложно использовать и настроить, поэтому мы будем использовать Webpack Encore (https://symfony.com/doc/current/frontend.html), который представляет собой автономную оболочку Webpack, созданную SensioLab, редактором Symfony.

Нам просто нужно установить его и некоторые пакеты, связанные с Vue:

 composer require symfony / webpack-encore-pack 
npm install - save node-sass sass-loader vue vue-loader vue-template-compiler

В сгенерированный файл webpack.config.js , мы должны включить загрузчик Vue:

 Encore 
// включает поддержку VueJs
.enableVueLoader ()

Теперь мы можем создавать файлы .vue и пользоваться мощью vue-template-loader:

Чтобы создать экземпляр нашего vue, мы просто добавляем div с определенным классом и обрабатываем монтирование в нашей точке входа javascript:

Пришло время пойти глубже и глубже!

Давайте посмотрим, что я называю подходом к виджетам . В этом примере я показываю виджеты интеграции в приложении Symfony, но оно может работать с любым другим инструментом.

Идея состоит в том, чтобы составлять страницы как обычно, отрисованные с сервера с помощью статического HTML, и улучшать его с помощью некоторых частей Vue, называемых Widgets . Виджет может быть уникальным или использоваться повторно. Он может быть независимым или связанным с другими с помощью шины событий или магазина Vuex.

При таком подходе нам нужно быть более строгими. Вот предложение файловой архитектуры для обработки наших виджетов и файлов, связанных с Vue:

В нашем каталоге js у нас есть одна папка для утилит vue, таких как миксины, плагины, директивы и т. Д..

У нас есть папка Widgets , в которой находятся все наши виджеты. У каждого виджета есть собственный каталог с корневым vue и их компонентами. У нас может быть каталог Common с общими vues.

Существует также каталог для магазина и один для других служб, таких как api, eventBus и т. Д.

, наконец, у нас есть наша основная точка входа в Vue: vueWidgetsHandler .

Этот файл отвечает за создание наших виджетов. Он может быть как очень общим, так и полностью настроенным.

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

В этом примере мы используем элемент DOM набора данных в качестве значений для свойств. Он совместим с HTML и прост в использовании.

С хорошей комбинацией виджетов вы можете создавать веб-сайты, похожие на приложение! Вы можете найти реальный пример здесь (мобильная версия лучше;)): www.make-my-box.com

Эта статья достаточно длинная, но есть много возможностей улучшить этот подход, поиграв с Vuex. store, или eventBus!

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

Весь код и многое другое доступно здесь: https: // github.com / Erilan / replace-jQuery-by-vuejs

Что такое Vue.js


Vue.js позволяет расширять HTML с помощью атрибутов HTML, называемых директивами

Директивы Vue.js предлагают функциональности для приложений HTML

Vue.js предоставляет встроенных директивы и пользовательских директив


Директивы Vue.js

Vue.js использует двойные фигурные скобки {{}} в качестве заполнителей для данных.

Директивы Vue.js - это атрибуты HTML с префиксом v-


Пример Vue

В приведенном ниже примере новый объект Vue создается с помощью new Vue () .

Свойство el: связывает новый объект Vue с HTML
элемент с id = "app" .

Пример

var myObject = new Vue ({
el: '#app',
data: {message: 'Hello Vue!'}
})

Попробуйте сами »


Vue.js привязка

Когда объект Vue привязан к элементу HTML, элемент HTML изменится
при изменении объекта Vue:

Пример

var myObject = new Vue ({
el: '#app',
data: {message: 'Hello Vue!'}
})

функция
myFunction () {
myObject.message = "Джон Доу";
}

Попробуйте сами »


Двусторонняя привязка Vue.js

Директива v-model связывает значение элементов HTML с данными приложения.

Это называется двусторонней привязкой:

Пример

{{message}}

Попробуйте сами »


Связывание цикла Vue.js

Использование директивы v-for для привязки
массив объектов Vue в «массив» элемента HTML:

Пример

{{
Икс.text}}

Попробуйте сами »

Стоимость Javascript Framework - Консультации по производительности в Интернете

Нет более быстрого (каламбурного) способа замедлить работу сайта, чем использование связки JavaScript.

Дело в том, что в JavaScript вы платите налог на производительность не менее четырех раз:

  1. Стоимость скачивания файла по сети
  2. Стоимость разбора и компиляции несжатого файла после загрузки
  3. Стоимость выполнения JavaScript
  4. Стоимость памяти

Комбинация очень дорогая.

И мы отправляем все больше и больше. Мы делаем основные функции наших сайтов все более зависимыми от JavaScript по мере того, как организации переходят на сайты, управляемые такими фреймворками, как React, Vue.js и друзьям.

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

Благодаря HTTP Archive мы можем это выяснить.

Данные

Всего HTTP Archive отслеживает 4 308 655 URL для настольных компьютеров и 5 484 239 URL для мобильных устройств.Среди множества точек данных отчеты HTTP Archive для этих URL-адресов представляют собой список обнаруженных технологий для данного сайта. Это означает, что мы можем выбрать тысячи сайтов, использующих различные фреймворки, и посмотреть, сколько кода они отправляют и сколько это стоит ЦП.

Я выполнил все запросы для марта 2020 года, самого последнего запуска на тот момент.

Я решил сравнить совокупные данные HTTP-архива для всех сайтов, записанных с сайтами с обнаруженными React, Vue.js и Angular.

Для развлечения я также добавил jQuery - он по-прежнему пользуется огромной популярностью, и он также представляет собой немного другой подход к созданию с использованием JavaScript, чем подход одностраничного приложения ( SPA ), предоставляемый React, Vue.js и Angular.

URL-адреса в HTTP-архиве с определенными платформами обнаружены
Каркас Мобильные URL URL-адреса рабочего стола
jQuery 4 615 474 3 714 643
Реагировать 489 827 241 023
Vue.js 85 649 43 691
Угловой 19 423 18 088

Надежды и мечты

Прежде чем мы начнем, вот на что я надеюсь.

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

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

Лучшая из фреймворков справится с обоими задачами: предоставит лучшую отправную точку и поможет ограничить выход из-под контроля.

Если посмотреть на медианное значение для наших данных, мы этого не увидим и фактически упустим тонну информации. Вместо этого для каждой характеристики я выделил следующие процентили: 10-й, 25-й, 50-й (медиана), 75-й и 90-й.

Мне особенно интересны 10-й и 90-й процентили. 10-й процентиль представляет лучших в своем классе (или, по крайней мере, достаточно близких к лучшим в своем классе) для данной структуры. Другими словами, только 10% всех сайтов, использующих данный фреймворк, достигают этой отметки или выше. С другой стороны, 90-й процентиль является противоположностью этого спектра - он показывает нам, насколько плохи могут быть дела. 90-й процентиль представляет собой длинный хвост - последние 10% сайтов с наибольшим количеством байтов или наибольшим временем основного потока.

байтов JavaScript

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

Байт JavaScript, обслуживаемых мобильными устройствами, по процентилям
10-я 25-я 50-я 75-я 90-й
Все сайты 93.4kb 196.6кб 413.5kb 746.8kb 1,201.6kb
Сайты с jQuery 110.3kb 219.8kb 430.4kb 748.6kb 1,162.3kb
Сайты с Vue.js 244.7kb 409.3kb 692.1kb 1 065.5кб 1,570.7kb
Сайты с угловой 445.1kb 675.6kb 1,066.4kb 1,761.5kb 2,893.2kb
Сайтов с React 345.8kb 441.6kb 690.3kb 1,238.5kb 1,893.6kb
Байт JavaScript, обслуживаемых настольными устройствами, по процентилям
10-я 25-я 50-я 75-я 90-й
Все сайты 105.5кб 226.6kb 450.4kb 808.8kb 1,267.3kb
Сайты с jQuery 121.7kb 242.2kb 458.3kb 803.4kb 1,235.3kb
Сайты с Vue.js 248.0kb 420.1kb 718.0kb 1,122.5kb 1,643.1kb
Сайты с угловой 468.8kb 716.9kb 1,144.2kb 1,930.0kb 3,283.1kb
Сайтов с React 308.6kb 469.0kb 841.9kb 1,472.2kb 2,197.8кб

Для огромного размера полезной нагрузки 10-й процентиль оказывается примерно таким, как и следовало ожидать: если используется одна из этих сред, есть больше JavaScript даже в самых идеальных ситуациях. Это неудивительно - нельзя добавить фреймворк JavaScript в качестве отправной точки по умолчанию и ожидать, что из коробки будет поставляться меньше JavaScript.

Чем является , так это тем, что одни фреймворки коррелируют с лучшими отправными точками, чем другие.Сайты с jQuery - лучшие из всех, начиная с примерно на 15% больше JavaScript на настольных устройствах и примерно на 18% на мобильных. (Здесь, по общему признанию, есть небольшая предвзятость. JQuery можно найти на многих сайтах, поэтому, естественно, он будет иметь более тесную связь с общими числами, чем другие. Тем не менее, это не меняет способ отображения необработанных чисел для каждый каркас.)

Хотя даже увеличение на 15–18% примечательно, сравнение этого показателя с противоположным концом спектра дает ощущение очень низкого налога на jQuery.Сайты с Angular поставляют на 344% больше JavaScript для настольных компьютеров с 10-м процентилем и на 377% больше для мобильных устройств. Сайты с React, следующим по сложности, поставляют на 193% больше JavaScript для настольных компьютеров и на 270% больше для мобильных устройств.

Я упоминал ранее, что даже если отправная точка немного отклонена, я надеюсь, что фреймворк все же сможет обеспечить ценность, ограничивая каким-либо образом верхнюю границу.

Интересно, что сайты, управляемые jQuery, следуют этому шаблону. Хотя они немного крупнее (15–18%) в 10-м процентиле, они немного меньше, чем их совокупность в 90-м процентиле - около 3% как на настольных компьютерах, так и на мобильных устройствах.Ни одно из этих чисел не является особо значимым, но, по крайней мере, сайты с jQuery, похоже, не имеют значительно худшего «длинного хвоста» с точки зрения отправленных байтов JavaScript.

Этого нельзя сказать о других фреймворках.

Как и в случае с 10-м процентилем, сайты, основанные на Angular и React, имеют тенденцию дистанцироваться от других на 90-м процентиле, и это не очень лестно.

В 90-м процентиле сайты Angular отправляют на 141% больше байтов на мобильные устройства и на 159% больше байтов на настольные компьютеры.Сайты с React отправляют на 73% больше байтов на ПК и на 58% больше на мобильные устройства. При 90-м процентиле веса 2197,8 КБ сайты React доставляют мобильным пользователям на 322,9 КБ больше JavaScript, чем ближайший Vue.js. Разрыв настольных компьютеров между Angular и React и остальной толпой еще больше - сайты, основанные на React, содержат на 554,7 КБ больше JavaScript, чем сайты, основанные на Vue.js.

Время основного потока JavaScript

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

Как только появится этот JavaScript, он должен приступить к работе. Любая работа, выполняемая в основном потоке браузера, особенно беспокоит. Основной поток отвечает за обработку пользовательского ввода во время расчета стиля, макета и рисования. Если мы забиваем его большим количеством работы с JavaScript, у основного потока не будет шансов сделать это своевременно, что приведет к задержкам и сбоям.

HTTP Archive записывает время основного потока V8, поэтому мы можем запросить, сколько времени этот основной поток работает со всем этим JavaScript.

Время ЦП, связанное со сценариями (в миллисекундах) для мобильных устройств, в процентилях
10-я 25-я 50-я 75-я 90-й
Все сайты 356,4 мс 959,7 мс 2,372,1 мс 5,367,3 мс 10 485.8 мс
Сайты с jQuery 575,3 мс 1,147,4 мс 2,555,9 мс 5,511,0 мс 10 349,4 мс
Сайты с Vue.js 1,130,0 мс 2087,9 мс 4100,4 мс 7676,1 мс 12849,4 мс
Сайты с угловой 1,471.3 мс 2380,1 мс 4 118,6 мс 7,450,8 мс 13 296,4 мс
Сайтов с React 2700,1 мс 5 090,3 мс 9 287,6 мс 14 509,6 мс 20 813,3 мс
Время ЦП, связанное со сценариями (в миллисекундах) для настольных устройств, в процентилях
10-я 25-й 50-я 75-я 90-я
Все сайты 146.0ms 351,8 мс 831.0 мс 1739,8 мс 3 236,8 мс
Сайты с jQuery 199,6 мс 399,2 мс 877,5 мс 1779,9 мс 3215,5 мс
Сайты с Vue.js 350,4 мс 650,8 мс 1,280.7 мс 2388,5 мс 4010,8 мс
Сайты с угловой 482,2 мс 777,9 мс 1365,5 мс 2400,6 мс 4 171,8 мс
Сайтов с React 508,0 мс 1045,6 мс 2,121,1 мс 4235,1 мс 7 444.3 мс

Здесь есть несколько очень знакомых тем.

Во-первых, сайты с обнаруженным jQuery тратят на на работу JavaScript в основном потоке на меньше времени, чем три других проанализированных. При 10-м процентиле объем работы основного потока JavaScript, выполняемой на мобильных устройствах, увеличивается на 61%, а на настольных компьютерах - на 37%. На 90-м процентиле сайты jQuery набирают чертовски близко к совокупному количеству, тратя на 1,3% меньше времени на основной поток для мобильных устройств и.На 0,7% меньше времени на настольных компьютерах.

Противоположный конец - фреймворки, которые соответствуют большей части времени, затрачиваемого на основной поток, - снова состоит из Angular и React. Единственное отличие состоит в том, что хотя сайты Angular поставляли больше JavaScript, чем сайты React, на самом деле они тратят меньше времени на процессор - на намного меньше времени на .

В 10-м процентиле сайты Angular тратят на 230% больше времени на ЦП для работы, связанной с JavaScript, на настольных устройствах и на 313% больше на мобильных устройствах.Сайты React поднимаются на задний план, проводя на 248% больше времени на настольных устройствах и на 658% больше на мобильных устройствах. Нет, 658% - это не опечатка. На 10-м процентиле сайты с React тратят 2,7 секунды на основной поток, обрабатывающий весь отправленный JavaScript.

По сравнению с этими большими числами, ситуация в 90-м процентиле, по крайней мере, выглядит немного лучше. Основной поток сайтов Angular тратит на 29% больше времени на JavaScript для настольных устройств и на 27% больше времени на мобильных устройствах. Сайты React проводят на настольных компьютерах на 130% больше времени, а на мобильных - на 98%.

Эти проценты выглядят намного лучше, чем в 10-м процентиле, но имейте в виду, что массовые числа довольно пугающие: это 20,8 секунды работы основного потока для сайтов, построенных с помощью React на 90-м процентиле на мобильных устройствах. (Думаю, что именно происходит в это время - тема для последующей публикации.)

Есть одна потенциальная ошибка (спасибо, Джереми, что я дважды проверил статистику с этой точки зрения) - многие сайты будут использовать несколько библиотек. В частности, я вижу множество сайтов, использующих jQuery вместе с React или Vue.js по мере перехода на эту архитектуру. Итак, я повторно выполнил запросы, только на этот раз я включил только URL-адреса, которые включали только React, jQuery, Angular или Vue.js , а не их комбинацию .

Процессорное время, связанное со сценариями (в миллисекундах) для мобильных устройств, на которых обнаружена только одна из платформ, в процентилях
10-я 25-я 50-я 75-я 90-й
Сайты только с jQuery 542.9 мс 1062,2 мс 2,297,4 мс 4,769,7 мс 8718,2 мс
Сайты только с Vue.js 944,0 мс 1716,3 мс 3194,7 мс 5,959,6 мс 9843,8 мс
Сайты с угловой 1328,9 мс 2 151.9 мс 3 695,3 мс 6 629,3 мс 11 607,7 мс
Сайтов с React 2,443,2 мс 4620,5 мс 10 061,4 мс 17074,3 мс 24,956,3 мс

Во-первых, неудивительный момент: когда используется только один фреймворк, производительность улучшается гораздо чаще, чем нет.Цифры для каждой структуры лучше выглядят в 10-м и 25-м процентилях. В этом есть смысл. Сайт, который хорошо построен с одной структурой , должен работать лучше, чем сайт, который хорошо построен с двумя или более.

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

Это немного странно, но вот мое предположение.

Если у вас одновременно работают React и jQuery, у вас больше шансов перейти на React или использовать смешанную кодовую базу. Поскольку мы уже видели, что сайты с jQuery тратят меньше времени на основной поток, чем сайты с React, имеет смысл, что наличие некоторой функциональности, все еще управляемой jQuery, немного снизит показатели.

Однако по мере того, как вы уходите от jQuery и сосредотачиваетесь исключительно на React, ситуация меняется.Если сайт действительно хорошо построен и вы используете React экономно, все в порядке. Но для среднего сайта больше работы внутри React означает, что основной поток получает все большую нагрузку.

Разрыв между мобильными и настольными устройствами

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

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

Процентное увеличение объема работы по написанию сценариев основного потока на мобильных устройствах по сравнению с настольными устройствами, по процентилям
10-я 25-я 50-я 75-я 90-й
Все сайты 144,1% 172.8% 185,5% 208,5% 224,0%
Сайты с jQuery 188,2% 187,4% 191,3% 209,6% 221,9%
Сайты с Vue.js 222,5% 220,8% 220,2% 221.4% 220,4%
Сайты с угловой 205,1% 206,0% 201,6% 210,4% 218,7%
Сайтов с React 431,5% 386,8% 337,9% 242,6% 179,6%

Хотя между телефоном и ноутбуком ожидается некоторое расхождение, такие высокие цифры говорят мне о том, что нынешний набор фреймворков не делает достаточно для того, чтобы отдавать приоритет менее мощным устройствам и помогать сократить этот пробел.Даже при 10-м процентиле сайты React тратят на основной поток на мобильных устройствах на 431,5% больше времени, чем на настольных устройствах. У jQuery самый низкий пробел среди всех фреймворков, но даже там он дает на 188,2% больше времени на мобильных устройствах. Когда мы заставляем ЦП работать активнее - а мы все чаще делаем это, - счета в конечном итоге ложатся на счет людей с менее мощными устройствами.

Общая картина

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

Похоже, этого не происходит с производительностью (или, по-видимому, с доступностью).

Стоит отметить, что, поскольку сайты с React или Angular тратят больше времени на ЦП, чем другие, это не обязательно то же самое, что сказать, что React дороже ЦП, чем Vue.js. Фактически, он очень мало говорит о производительности основных используемых фреймворков и гораздо больше о подходе к разработке, который эти фреймворки могут поощрять (намеренно или нет) посредством документации, экосистемы и общих практик программирования.

Также стоит отметить то, чего здесь нет: данные о том, сколько времени устройство тратит на этот JavaScript для последующих просмотров. Аргументом в пользу архитектуры SPA является то, что после установки SPA вы теоретически получаете более быструю последующую загрузку страниц. Мой собственный опыт подсказывает мне, что это далеко не так, но у нас нет конкретных данных, подтверждающих это в любом направлении.

Что ясно: прямо сейчас, если вы используете фреймворк для создания своего сайта, вы идете на компромисс с точки зрения начальной производительности - даже в лучшем из сценариев.

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

Есть повод для оптимизма. Меня воодушевляет то, насколько тесно сотрудники Chrome работают с некоторыми из этих фреймворков, чтобы улучшить их производительность.

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

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

  • Сделайте проверку работоспособности: действительно ли вам нужно использовать ? Ванильный JavaScript сегодня может делать много .
  • Есть ли более легкая альтернатива (Preact, Svelte и т. Д.), Которая поможет вам достичь цели на 90%?
  • Если вы собираетесь использовать фреймворк, существует ли что-нибудь, что обеспечивает лучшие и более строгие настройки по умолчанию (например, Nuxt.js вместо Vue.js, Next.js вместо React и т. д.)?
  • Каков ваш бюджет производительности для вашего JavaScript?
  • Какое трение вы можете внести в рабочий процесс, из-за которого будет сложнее добавить больше JavaScript, чем это абсолютно необходимо?
  • Если вы используете фреймворк для эргономики разработчика, нужно ли вам отправлять его клиенту, или вы можете справиться со всем этим на сервере?

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

Например, мы могли бы использовать все сайты, на которых не обнаружено ни одного из упомянутых фреймворков (jQuery, React, Vue.js, Angular).

Вот числа для основного потока JavaScript, работающего на мобильных устройствах для этих URL:

Время ЦП, связанное со сценариями (в миллисекундах) для мобильных устройств, в процентилях
10-я 25-я 50-я 75-я 90-й
Все сайты 6.3 мс 75,3 мс 382,2 мс 2316,6 мс 5 504,7 мс

Идя еще дальше, мы могли бы использовать все сайты, вообще не обнаруженные фреймворком или библиотекой JavaScript. Вот как выглядит время основного потока для них:

Время ЦП, связанное со сценариями (в миллисекундах) для мобильных устройств, в процентилях
10-я 25-я 50-я 75-я 90-й
Все сайты 3.6 мс 29,9 мс 193,2 мс 1399,6 мс 3714,5 мс

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

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

Тем не менее, как несколько человек указали мне, когда я показывал им данные, интересно увидеть эти альтернативные базовые показатели, поскольку они очень ясно показывают, насколько эти инструменты портят средние значения.

Вопрос о том, какой фреймворк выбрать (vue.js vs jQuery)... Я знаю, что это ужасный вопрос ... :(: learnjavascript

Хорошо,

Я неплохо разбираюсь в jQuery и задаюсь вопросом, стоит ли мне изучать vue.js?

Я считаю jQuery простым и привык с его синтаксисом. Ассортимент плагинов также довольно впечатляющий, например, таблицы данных.

Для моего 1-го «большого» проекта я сделал небольшое веб-приложение для управления продажами в компании моего друга, используя ядро ​​php (5) и jQuery. На самом деле это был «обучающий» проект, которым я занялся после того, как закончились мои учебники по разработке полного стека.Но моему другу приложение понравилось, и он решил им воспользоваться. В нем много манипуляций (обновления) DOM, проверки форм, вызовов AJAX, базовой анимации, таблиц, phpEmails, TCPDF и баз данных.

В настоящее время я планирую изучить laravel, php (7) и улучшить свои навыки работы с MySQL, и хотел бы перестроить это приложение вместе с множеством новых функций (интеграция с gDrive / Dropbox, улучшенные макеты таблиц и взаимодействия, чтобы назвать несколько ).

Следовательно, мне было интересно, поскольку vue.js очень популярен в сообществе laravel, а jQuery обычно рассматривается людьми в сети как «почти мертвый» или «грех добавить»... должен ли я использовать / изучать vue вместо jQuery?

Я немного посмотрел на синтаксис vue, похоже, это немного больше работы, чем jquery? Как у вас есть лишние теги в html и прочее? (Пожалуйста, имейте в виду ... Я буквально только что заглянул ... особо не останавливался).

Кроме того, для моего конкретного случая использования .. это улучшит что-нибудь? Ограничит ли это меня каким-либо образом? Мне потребуется много времени, чтобы изучить и применить его для своих нужд? Мне потребовалось 4-5 часов в день в течение примерно 2 месяцев, чтобы изучить html + css + jQuery + mysql + php5 из руководств udemy, и это только основы, я действительно понял, как только я начал сталкиваться с проблемами при выполнении вышеупомянутого проект и их решение - вот как я стал уверен в веб-разработке.

Я знаю, что на эти вопросы нельзя ответить «да» или «нет», но большинство онлайн-статей бросают вам много информации, и ее трудно приспособить к вашим собственным требованиям. Так что некоторая помощь от вас, ребята, может иметь большое значение.

Заранее спасибо 🙂

Как мы делаем Vue: год спустя
|
GitLab

Мы давно не писали о Vue. Мы используем Vue уже больше года, и жизнь идет очень хорошо. Спасибо @lnoogn за напоминание о написании этой статьи!

Наша ситуация напоминает мне цитату о Scala из «Scala медленно умирает?» Кто-то однажды сказал:

У людей Scala нет времени на реддитинг и ведение блогов, они заняты тем, что делают.

Именно этим мы и занимаемся. Как и Scala, Vue при правильном использовании работает очень, очень хорошо. Оказывается, Vue - не модное слово, Vue - это рабочая лошадка. Многие наши проблемы были решены нами и другими. У нас все еще есть проблемы, но теперь у нас есть воспроизводимый «способ написания Vue». Мы не принимаем каждую новую идею, но мы изменили несколько вещей с момента нашего последнего выступления.

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

Просто используйте VueX

Мы обнаружили, что VueX облегчает нашу жизнь. Если вы пишете среднюю или большую функцию, используйте VueX. Если это крошечная функция, вы можете обойтись без нее. Мы совершили ошибку, не использовав VueX для большой функции. Мы написали многофайловый редактор (WIP), чтобы заменить наше текущее представление файла репо, чтобы облегчить редактирование нескольких файлов.

Вначале мы не использовали VueX для этой функции, а вместо этого использовали шаблон магазина. В документации Vue говорится о шаблоне хранилища, который хорошо работает, когда вы стремитесь строго придерживаться этого шаблона. Мы обнаружили, что вам лучше проводить время с VueX. Хотя изначально VueX более подробный, он гораздо более масштабируемый и сэкономит вам массу времени в долгосрочной перспективе. Наша ошибка произошла, когда мы изменили данные в нескольких местах. В VueX вы вынуждены изменять данные в одном месте.Если вы этого не сделаете, вы начнете гоняться за неожиданными ошибками.

Напишите качественный код

Несмотря на то, что VueJS и VueX прекрасны, все же возможно (как и с любым кодом) написать плохой код Vue. Хотя код может работать, ваша долговечность и масштабируемость могут пострадать. Производительность может пострадать. С Vue так легко получить то, что кажется работающим, идеальный код, потому что Vue так просто писать. Проблемы с долговечностью могут означать, что ваш код изначально работает, но вам (и другим) будет сложно обновить код.Проблемы с производительностью могут возникать не с небольшими наборами данных, а с большими. Код может запутаться. Ваш код может иметь неприятный запах. Да, даже с Vue вы можете почувствовать запах кода.

Когда вы добавляете что-то в объект data или хранилище для отслеживания Vue, Vue будет рекурсивно проходить по вашему объекту данных и отслеживать все. Если ваши данные супериерархические и в целом просто большие, и вы часто меняете что-то (например, на mousemove ), то вы можете создать мусор.Неплохо, если Vue наблюдает за большими наборами данных, но просто подтвердите, что вам действительно нужны данные, которые вы наблюдаете, для реагирования. С Vue легко сделать все реактивным, когда в этом может не быть необходимости.

Вот почему мы очень строги, когда кто-то пишет код Vue. Они должны следовать нашей документации. Они также должны писать Vue только тогда, когда это необходимо, и не писать его, когда это излишне.

Весь наш новый код Vue следует архитектуре Flux. VueX также следует за Flux, что является одной из причин, по которой мы используем VueX.Вы можете использовать ранее упомянутый «шаблон хранения», но VueX — лучший выбор, поскольку он обеспечивает соблюдение всех правил. Если вы станете мошенником, вы в конечном итоге сами будете соблюдать правила и, вероятно, будете делать ошибки. Чем меньше вы кладете на тарелку, тем лучше. Хорошим примером хорошо написанного приложения Vue является список образов реестра.

Я хочу использовать jQuery с Vue

Во время разработки этот вопрос все время всплывал.

Можно ли когда-нибудь смешивать jQuery с VueJS?

Мы не говорим об использовании Select2, библиотеки jQuery.Мы говорим о необходимости запрашивать DOM. Мы обсуждали использование jQuery, и было предложено следующее:

Использование jQuery — это нормально, но только для запросов.

Сначала у меня было несколько дискуссий об использовании jQuery с Vue. Некоторые говорили, что это может быть нормально, но только в ситуациях только для чтения (запросов). Однако после исследования мы обнаружили, что , а не — хорошая идея использовать jQuery с Vue. Всегда будет лучшее решение. Мы обнаружили, что если вам когда-нибудь понадобится запросить DOM в архитектуре Vue, значит, вы делаете что-то не так.

Если бы кто-то гипотетически использовал jQuery только для самых крошечных запросов, нужно было бы количественно оценить эти ситуации. Вместо этого вы должны отказаться от запросов к DOM в Vue.

Вместо запроса вы обнаружите, что использование хранилища в сочетании с серверным кодом обычно является гораздо более простым ответом. Сервер может обеспечить достоверность ваших данных, которые вы не можете предоставить на стороне клиента. По большей части мы обнаруживаем, что чем меньше нам придется вводить в заблуждение данные на стороне клиента, тем лучше.Это не значит, что никогда нельзя изменять данные на стороне клиента, но обычно это не самое чистое решение. В GitLab мы используем запросы только для получения конечных точек из атрибута data нашего основного элемента, но мы не используем jQuery, мы используем el.dataset . В GitLab мы (сотрудники Frontend) разговариваем с людьми Backend, чтобы обеспечить структуру данных, которые мы будем использовать. Таким образом, и команда Frontend, и команда Backend могут контролировать.

Пример ситуации:

Проверьте этот выпуск:

Теперь мы отображаем все комментарии к проблеме во Vue.Примером ситуации, когда мы хотели использовать jQuery, было переписывание функции редактирования последнего комментария пользователя. Когда кто-то нажимает клавишу вверх на своей клавиатуре из пустого нового комментария textarea (в самом низу страницы), мы позволяем им редактировать последний созданный ими комментарий, как в Slack. Не только последний комментарий, но и последний комментарий , созданный ими . Мы отметили последний пользовательский комментарий на картинке красным. Конечно, есть нехватка времени.Тогда кто-то может сказать,

Разве мы не можем просто сделать здесь быстрое решение и исправить его позже?

Конечно, вы могли бы запросить DOM для этого. В этом случае лучшим решением будет позволить разработчикам серверной части пометить последний пользовательский комментарий в возвращаемом JSON. Backend-разработчики имеют прямой доступ к базе данных, что означает, что они могут оптимизировать код. Тогда в этом случае вообще не нужно выполнять никакой работы на стороне клиента. Кто-то должен сделать работу, чтобы отметить последний комментарий пользователя.В этом случае решение — просто найти подходящего человека для работы. Как только вы получите эти данные с сервера, комментарий будет в вашем магазине , готовый для вашего легкого доступа. Теперь ты можешь делать все, что угодно. Мир это твоя устрица.

Если вы обнаружите, что запрашиваете DOM «только на этот раз» 😉, всегда есть лучшее решение.

Правильное приложение Vue

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

Вы можете начать с одного div .

  
.js-vue-app {данные: {конечная точка: 'foo'}}


Вы можете передавать свои конечные точки через атрибуты данных. Затем Vue может вызывать эти конечные точки с помощью HTTP-клиента по вашему выбору.

Вы не хотите создавать URL-адреса в клиентском JavaScript. Убедитесь, что вы передаете все свои серверные URL-адреса через конечные точки.При написании Vue важно позволить серверу делать то, что он должен.

Повышение производительности

Недавно мы переписали наши комментарии к проблеме во Vue. Комментарии к проблеме ранее были написаны на Haml, jQuery и Rails. У нас было узкое место, потому что мы не загружали комментарии асинхронно. Быстрое решение — загрузить комментарии через ajax и заполнить комментарии после загрузки страницы. Один из способов ускорить загрузку страницы — не блокировать страницу тяжелыми элементами и загружать их после.

Что нам нравится, так это то, что однажды мы включили новые комментарии, и некоторые люди не знали, что мы их отредактировали.В результате рефакторинга наши страницы задач загружаются намного быстрее и меньше мусора.

Загрузка комментариев на странице проблемы теперь упрощена, и теперь отдельные проблемы загружаются намного быстрее. Раньше страница задачи могла иметь десятки тысяч слушателей событий. Наш предыдущий код не удалял должным образом и не отслеживал прослушиватели событий. Эти массивные прослушиватели событий (наряду с другими проблемами) создавали мусор, поэтому при прокрутке страницы было много комментариев. Мы удалили jQuery и добавили его во Vue, сосредоточившись на повышении производительности.Вы можете ясно видеть и чувствовать, что страница работает намного быстрее. Однако наша работа по повышению производительности только началась. Это переписывание закладывает основу для улучшения производительности, которую легче писать, потому что код намного легче поддерживать. Раньше код было сложно поддерживать. Теперь код комментариев к проблеме правильно разделен и «разбит на компоненты».

С этими новыми улучшениями, а также другими параллельными улучшениями, например загружая изображения при прокрутке, мы смогли ускорить загрузку страницы и ее выполнение.

Рефакторинг — это то слово, которое новый супер-зеленый разработчик упоминает в первый же день, когда предлагает переписать все на Angular. В GitLab этого не произошло. Наши фронтенд-разработчики, как правило, очень консервативны, и это очень хорошо. Возникает вопрос, почему кажется, что все всегда рефакторингуют? Чего они пытаются достичь? Я могу говорить только от лица GitLab. Чего мы хотим добиться с помощью рефакторинга? На самом деле это будет стоить больших денег. Стоимость:

  1. Стоимость рефакторинга.
  2. Стоимость тестирования изменения.
  3. Стоимость обновления тестов и документации.

У вас также больше риска:

  1. Риск внесения ошибок.
  2. Риск взять на себя огромную задачу, которую вы не можете выполнить.
  3. Риск не достичь желаемого качества / улучшений.

Наши цели:

Цель № 1 : Сделать код более удобным для сопровождения. Мы хотим упростить процесс добавления новых функций. В долгосрочной перспективе этот рефакторинг сэкономит нам время, но он требует значительного количества времени, чтобы окупить время, потраченное на рефакторинг.Жесткая правда может заключаться в том, что рефакторинг обычно не экономит ваше время, но может избавить вас от стресса.

Цель № 2 : Если все сделано правильно, то можно сделать разработчиков счастливыми. Ничто не дает вашей команде больше сил, чем счастливый, взволнованный программист. Подчеркнутый кодер захочет прекратить кодирование; взволнованный кодер не захочет останавливаться. Счастливый программист экономит больше всего времени.

Для достижения нашей цели нашим следующим шагом будет рефакторинг раздела комментариев мерж-реквеста. Наши комментарии к мерж-реквестам очень медленные для мерж-реквестов с большим количеством комментариев.Комментарии становятся медленнее и меньше реагируют примерно на 200 комментариев. Дифференциал тоже медленный. Для этого есть масса причин, одна из которых заключается в том, что JavaScript вызывает несколько перекомпоновок, на которые уходит много времени. Мы могли бы реорганизовать это и уже исправили, но это не долгосрочное решение. В случае огромного MR был код, который вызывал перекомпоновку, которая занимала более восьми секунд! Теперь это исправлено. На этом изображении вы можете видеть, что есть и другие вещи, замедляющие работу.Ясно, что здесь есть над чем поработать. Наша самая большая проблема заключается в том, что код не обслуживается, а это означает, что исправления занимают больше времени. Рефакторинг Vue обеспечит отличные начальные улучшения скорости и заложит основу для более простых улучшений в будущем.

В GitLab так много работы. Если вы хотите принять участие в исследовании огромных катакомб GitLab и написании отличного кода, и если вы заинтересованы в помощи нашей команде Frontend, тогда подайте заявку.

3+ способа добавления Bootstrap в приложения Vue 3

В этой статье мы увидим доступные варианты добавления Bootstrap в ваши приложения Vue 3.

Bootstrap 4 имеет много новых функций, таких как использование Flexbox, модулей ES6 и нового компонента карты (который вы можете использовать для простого создания макетов на основе карт в своих приложениях Vue 3, таких как знаменитый макет каменной кладки без плагинов JavaScript / jQuery. или сложные алгоритмы) и т. д.

Вы можете использовать Bootstrap 4 для добавления мобильного стиля в ваше приложение Vue 3, не изобретая заново колесо и не приобретая глубоких знаний CSS, особенно если вам нужно создавать сложные и адаптивные макеты.

Bootstrap 4 требует jQuery и Popper.js. jQuery — это библиотека DOM, которая выполняет прямые манипуляции с DOM, в отличие от Vue 3, который использует подход виртуального DOM, поэтому вы захотите избежать использования jQuery в своем приложении Vue 3, но это означает, что вы не сможете использовать много Bootstrap 4 компоненты, требующие jQuery.

Не волнуйтесь, хотя сообщество предоставило несколько пакетов, которые интегрируют Bootstrap 4 с Vue, не прибегая к jQuery.

Bootstrap-Vue

На момент написания этой статьи Bootstrap-Vue не поддерживает Vue 3, но BootstrapVue v4 будет иметь Vue.js v3 и поддержку Bootstrap v5 в соответствии с этой проблемой на GitHub.

Также ознакомьтесь с разделом Как использовать Vue 3 и добавить плагин Boostrap-vue?

Bootstrap-Vue предоставляет более 85 компонентов, более 45 доступных плагинов, несколько директив и более 1000 значков, BootstrapVue предоставляет одну из наиболее полных реализаций компонента Bootstrap v4.5 и системы сеток, доступных для Vue.js v2.6 , в комплекте с обширной и автоматизированной разметкой доступности WAI-ARIA.

Проект Bootstrap-Vue проделал большую часть тяжелой работы по замене jQuery на Vue, реализовав функции Bootstrap как компоненты Vue.

Добавление Bootstrap-Vue вручную в ваше приложение Vue

Перейдите к своему терминалу и перейдите в свой проект Vue, затем выполните следующую команду, чтобы установить bootstrap-vue следующим образом:

  npm install bootstrap-vue bootstrap --save
  

bootstrap-vue требует файлов CSS Bootstrap, поэтому вам также необходимо установить bootstrap .

Затем вам нужно включить плагин VueBootstrap в точке входа приложения Vue.

  импортировать Vue из 'vue'
импортировать BootstrapVue из "bootstrap-vue"
импортировать приложение из './App.vue'
импортировать "bootstrap / dist / css / bootstrap.min.css"
импортировать "bootstrap-vue / dist / bootstrap-vue.css"

Vue.use (BootstrapVue)

новый Vue ({
  el: '#app',
  render: h => h (приложение)
})
  

Использование Bootstrap-Vue Использование шаблонов

Вы также можете использовать эти два шаблона для создания каркаса вашего проекта Vue webpack-simple и webpack, которые интегрируют bootstrap-vue из коробки.

Например, вот как вы создаете новый проект Vue на основе bootstrap-vue / webpack-simple с использованием Vue CLI.

  vue init bootstrap-vue / webpack-simple мой-проект
cd my-project
npm install
  

Затем вы можете использовать разные компоненты Bootstrap 4

  <шаблон>
Это кнопка Это ссылка

Добавление Bootstrap с помощью Vue CLI

Вместо того, чтобы устанавливать его напрямую, мы можем использовать Bootstrap-Vue как плагин Vue CLI.Это позаботится о любом шаблоне конфигурации и автоматически добавит любые зависимости, поэтому я настоятельно рекомендую этот подход.

Давайте создадим новый проект Vue CLI:

  $ vue create bootstrap-vue-app
  

Обратите внимание, что вам нужно будет уже установить Vue CLI в вашей среде разработки (инструкции здесь).

Vue CLI теперь проведет вас через настройку приложения Vue. Если вы не уверены, какие параметры выбрать, просто выберите «по умолчанию».

Теперь перейдите в каталог нового проекта:

Теперь вы можете добавить плагин Bootstrap-Vue в свой проект.Если у вас нет других причин, я предлагаю вам выбрать «Y» для любых запросов.

Благодаря магии Vue CLI вы теперь настроили передовой проект Vue & Bootstrap без необходимости настройки!

Использование jQuery и Bootstrap 4 с Vue 3

Вы можете использовать исходную библиотеку начальной загрузки с jquery для стилизации вашего приложения Vue 3

  $ npm install bootstrap jquery popper.js
  

Примечание. Если вы не собираетесь использовать JavaScript Bootstrap, а собираетесь использовать только его стили, не беспокойтесь об установке jQuery или Popper.js.

Наконец, импортируйте его в основной скрипт, добавив следующие строки в начало файла src / main.js :

  import 'bootstrap'
импортировать 'bootstrap / dist / css / bootstrap.min.css'
  

Использование Bootstrap 5 с Vue 3

Поскольку не рекомендуется использовать jQuery с Vue, вы можете использовать Bootstrap 5, который все еще находится в альфа-версии, с вашим проектом Vue 3.

Bootstrap 5 удалил поддержку jQuery и использовал простой JavaScript для своих компонентов.

В это время вы можете установить Bootstrap 4 с помощью следующей команды:

  $ npm install bootstrap @ next
  

Заключение

Использование Bootstrap-Vue — это рекомендуемый способ интеграции Bootstrap 4 с вашим приложением Vue, поскольку он предлагает компоненты Vue для компонентов Bootsrap, требующих jQuery.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

2021 © Все права защищены. Карта сайта