Привет, народ!
В этой статье я особым образом расскажу о функции, которая, на мой взгляд, мало используется (или не комментируется) в сообществе Vue.js, а именно о фильтрах. Как и плагины, пользовательские директивы и миксины, фильтры являются частью многократно используемых функций Vue, помогая в процессе создания компонентов.
В компонентах Vue фильтры - это функции, которые позволяют нам получать различные форматы вывода динамических данных о его состоянии. То есть они не изменяют данные компонента, они могут только форматировать свои данные при рендеринге.
Локальные фильтры
Согласно официальной документации, использование фильтров происходит в интерполяциях усов и выражениях v-bind. Смотрите пример форматирования фильтра в шаблоне:
<!-- in interpolations text -->
{{ message | capitalize }}
<!-- in attribute interconnections -->
<div v-bind:text="message | capitalize"></div>
Создавая локально внутри компонента, мы можем иметь:
filters: {
capitalize(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
В этом первом примере, извлеченном из самой документации, мы можем проанализировать, что функция капитализации просто принимает значение и выполняет обработку с помощью необходимых методов для получения результата без вмешательства в исходное значение состояния компонента.
В некоторых ситуациях фильтры могут быть очень похожи на вычисляемые свойства с той разницей, что в фильтрах данные не преобразуются, они просто изменяют вывод и возвращают версия с заданной фильтрацией информации. Таким образом, для данных компонента не создается новое значение.
Глобальные фильтры
Существуют определенные ситуации, когда конкретный фильтр может использоваться для нескольких компонентов в вашем приложении, особенно в тех более крупных проектах, где несколько взаимодействий системы могут происходить на протяжении всего проекта.
Для этого существует возможность создания глобальных фильтров, и, как я уже сказал ранее, в равной степени, для миксинов, плагинов, среди прочего, они доступны в любом месте вашего проекта, облегчая их использование и повторное использование кодов.
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// your Vue instance...
})
В этом примере мы видим создание глобального фильтра с использованием свойства .filter внутри main.js. Если ваше приложение использует много фильтров, по организационным причинам рекомендуется создать отдельный файл, поместить в него все фильтры и импортировать их в файл main.js. И есть очень важная деталь, о которой всегда следует помнить: когда глобальный фильтр имеет то же имя, что и локальный фильтр, локальный фильтр будет иметь приоритет.
Поскольку фильтры являются функциями JavaScript, они принимают значение, которое нужно преобразовать, в качестве первого параметра. Вы также можете передать столько аргументов, сколько вам нужно, в соответствии с потребностями вашего приложения.
{{ message | filterA('arg1', arg2) }}
Так же, как мы можем передать несколько аргументов, можно связать несколько фильтров, для этого нам просто нужно использовать символ вертикальной черты (|), и через несколько фильтров преобразования мы получаем одно значение.
filters: {
Upper(value) {
return value.toUpperCase();
},
Lower(value) {
return value.toLowerCase();
},
}
А внутри значения мы используем его следующим образом:
{{ message | Upper | Lower }}
Конечно, в этом примере не будет никакой функциональности, но просто чтобы продемонстрировать, что можно поместить несколько фильтров в одно значение, и, как я уже упоминал, они связаны, функция Lower будет выполняться после получения результата Upper, будучи прошел как единственный аргумент Нижнего.
Изучите свои знания и немного поучитесь с помощью этой функции Vue.js, которая позволяет вам помогать с различными задачами в ваших приложениях. Подробнее смотрите в официальной документации.
Если вам понравилась эта статья, обязательно поделитесь и прокомментируйте. Если вы хотите узнать немного больше, обменяться идеями, вы можете оставить свое мнение по теме в комментариях и даже предложить что-то для следующих статей.
Наслаждайтесь и познакомьтесь с моей работой, посетите веб-сайт www.fsenaweb.me, на нем есть мое портфолио, мои социальные сети (в том числе GitHub, где у вас есть несколько примеров приложений для практики с Vue.js), и небольшое пространство для контактов.
И обязательно присоединяйтесь к нашей группе, и Vue.js в Бразилии через Telegram (VueJS Brasil) имеет особую галерею, готовую обменяться другим опытом.
Вот и все, увидимся в следующий раз! Меня зовут Матеус Рикелли, и за ваше внимание моя благодарность!
