10+ директив Vue.js, которые необходимо знать для максимальной производительности

Блог

10+ директив Vue.js, которые необходимо знать для максимальной производительности

Но что еще более фантастично, так это то, что вы также можете писать свои собственные директивы. Это позволило сообществу Vue.js решить бесчисленное количество проблем с кодом, которые затем можно было опубликовать в виде пакетов.



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

1. V-Hotkey

Репозиторий : v-hotkey



Демо : доступна здесь

Установка : npm install --save v-hotkey



Эта директива позволяет вам привязать одну или несколько горячих клавиш к вашим компонентам. Вам нужно скрыть компонент при нажатии клавиши Escape и отображать его при нажатии Enter при нажатии Control? Очень просто:

Press `esc` to close me! export default { data() { return { show: true } }, methods: { onClose() { this.show = false }, onShow() { this.show = true }, } }

2. V-Click-Outside

Репозиторий : v-клик-снаружи

Демо : доступна здесь

Установка : npm install --save v-click-outside

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

Hide me when a click outside this element happens export default { data() { return { show: true }; }, methods: { onClickOutside() { this.show = false; } } };

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

3. V-буфер обмена

Репозиторий : v-буфер обмена

Установка : npm install --save v-clipboard

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

Copy to clipboard

4. Vue-ScrollTo

Репозиторий : просмотр прокрутки

Демо : доступна здесь

Установка : npm install --save vue-scrollto

Эта директива будет прослушивать событие щелчка по элементу и прокручивать до заданного тега. Я в основном использую его при работе с оглавлением в статье или внутри заголовков навигации.

аол с почтовым знаком
Scroll to #element by clicking here

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

5. Vue-Lazyload

Репозиторий : vue-lazyload

Демо : доступна здесь

Установка : npm install --save vue-lazyload

Если вы хотите лениво загружать изображения для ускорения страниц, этот пакет вам пригодится. Особенно, когда на реализацию уходит не более 5 минут.

v-tooltip

Demo : available here

Installation : npm install --save v-tooltip

Примечание: Есть еще один популярный пакет для всплывающих подсказок, если вам нужна альтернатива: vue-директива-подсказка .

7. V-Scroll-Lock

Репозиторий : v-scroll-lock

Демо : доступна здесь

Установка :

экспресс-сессия mongodb

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

npm install --save v-scroll-lock X

A bunch of scrollable modal content

8. V-Money

Репозиторий : v-деньги

Демо : доступна здесь

Установка : export default { data () { return { opened: false } }, methods: { onOpenModal () { this.opened = true }, onCloseModal () { this.opened = false } } }

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

npm install --save v-money {{price}}

9. Vue-Infinite-Scroll

Репозиторий : просмотр бесконечной прокрутки

Установка : export default { data () { return { price: 123.45, money: { decimal: ',', thousands: '.', prefix: '$ ', precision: 2, } } } }

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

npm install --save vue-infinite-scroll

10. Vue-Clampy

Репозиторий : vue-clampy .

Установка : export default { data() { return { data [], busy: false, count: 0 } }, methods: { onLoadMore() { this.busy = true; setTimeout(() => { for (var i = 0, j = 10; i

Эта директива позволяет обрезать содержимое внутри элемента и добавлять в конец многоточие. За кулисами он использует clampy.js.

npm install --save @clampy-js/vue-clampy

11. Vue-InputMask

Репозиторий : vue-inputmask

Установка :

Long text to clamp here

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

npm install --save vue-inputmask

12. Директива Vue-Ripple

Репозиторий : директива vue-ripple

asp net core mongodb

Установка :

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

npm install --save vue-ripple-directive

13. Обзор

Репозиторий : взгляд-фокус

Установка : This is a button

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

npm install --save vue-focus Focus the input

14. V-Blur

Репозиторий : v-размытие

Демо : доступна здесь

Установка : export default { data: function() { return { focused: false, }; }, };

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

npm install --save v-blur Toggle the content visibility

Blurred content

15. Vue-Dummy

Репозиторий : vue-пустышка

Демо : доступна здесь

Установка : export default { data () { return blurConfig: { isBlurred: false, opacity: 0.3, filter: 'blur(1.2px)', transition: 'all .3s linear' } } } } };

При разработке приложения вам понадобится в какой-то момент использовать фиктивный текст lorem ipsum или где-то там добавить изображения-заполнители определенного размера. Вы можете легко сделать это с помощью этой директивы.

npm install --save vue-dummy

Заключение

Это были мои 15 любимых директив Vue.js. Как вы думаете, есть ли тот, кто достоин быть в этом списке?

# vue-js #javascript # веб-разработка