Источник: Nuances of Programming
Vue JS, созданный Эваном Ю и членами сообщества, представляет собой прогрессивный фреймворк для создания пользовательских интерфейсов. Он состоит из открытой базовой библиотеки, ориентированной на слой представления, и экосистемы поддержки библиотек, которая помогает в решении сложных задач в больших одностраничных приложениях. В этой статье мы ознакомимся с фильтрами — концепцией для представления данных в Vue JS.
Для начала
Предварительные требования, необходимые для начала работы с Vue CLI 3 в этой статье:
- Установленный Node.js 10.x и следующие версии. Проверить наличие установки можно, запустив node -v в терминале или командной строке.
- Установленный Node Package Manager 6.7 или следующие версии (NPM).
- Редактор кода: рекомендуется установить Visual Studio Code.
- Глобальная установка последней версии Vue.
- Установленный Vue CLI 3.0. Сначала удалите старую версию CLI:
npm uninstall -g vue-cli
А затем установите новую:
npm install -g @vue/cli
ИЛИ
- Разархивируйте скачанный проект.
- Перейдите к распакованному файлу и запустите команду для обновления зависимостей:
npm install
Что такое фильтры?
Фильтры — это инструменты представления данных, которые используются для фильтрации данных на уровне DOM. Это означает, что данные так же находятся в хранилищах, однако отображаются указанным образом, который не обязательно идентичен сохраненному изначально в хранилище данных.
Зачем нужны фильтры Vue?
- Улучшение представления: Vue JS нацелен на слой представления приложения и предоставляет инструменты для контроля над этим слоем, доступные для использования в любое время.
- Возможность повторного использования: фильтр можно объявить доступным глобально, а затем использовать в любом компоненте проекта, что значительно повышает эффективность.
- Форматирование данных: фильтры были созданы для предоставления разработчику возможности форматировать данные на уровне представления. Например, при выполнении запроса HTTP get, можно указать, как данные должны выглядеть на уровне шаблона. С помощью фильтров данные можно форматировать прямо в DOM.
Синтаксис фильтров
filters: {
capitalize: function (value) {
if (!value) return ‘’
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
Наличие функции обязательно. Функция фильтра всегда принимает значение выражения (результат предыдущей цепочки) в качестве первого аргумента. В указанном выше примере функция фильтра capitalize принимает значение message в качестве аргумента. Это похоже на написание метода или даже вычисляемого свойства.
В приведенном примере заглавные буквы представляют название фильтра, который обладает функцией, принимающей значение в качестве аргумента. Фильтр преобразует первую букву любой строки, к которой он прикреплен, в заглавную букву.
Типы фильтров
Фильтры могут быть определены:
- Локально.
- Глобально.
Глобальные фильтры
Эти фильтры определяются в экземпляре приложения Vue. Если приложение находится в проекте Vue, то они будут находиться в файле main.js, где начинается визуализация приложения Vue. Синтаксис немного отличается от определенных локально фильтров и выглядит следующим образом:
Vue.filter(‘capitalize’, function (value) {
if (!value) return ‘’
value = value.toString()
return value.toUpperCase()
})
Функция в этом примере преобразует все, что находится внутри значения, в заглавные буквы.
Локальные фильтры
Фильтры этого типа относятся к компоненту, в котором они определены. Эта концепция схожа с обработкой Vue глобальных и локальных стилей. Синтаксис выглядит следующим образом:
filters: {
capitalize: function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
Что мы будем создавать
Это простое демо-приложение привязки v-модели для отображения мощности и важности фильтров для дизайна пользовательского интерфейса в Vue.
Скопируйте приведенный ниже код в раздел сценария, где инициализируются данные и определяется фильтр.
Определенный здесь фильтр ограничен локально внутри компонента test. Функция преобразует первый символ строки в значении в заглавную букву.
Перейдите к файлу Test.vue в папке src и скопируйте приведенный ниже код в раздел шаблона.
Обратите внимание на |capitalize. В шаблоне фильтры Vue JS обозначаются символом вертикальной черты. Это главное отличие от концепции вычисляемых свойств. Наконец, для обновления таблицы стилей скопируйте приведенный ниже код в раздел style scoped:
При запуске приложения в этот момент вы увидите, что оно выглядит как демо-видео, приведенное выше.
npm run serve
Чтобы протестировать концепцию глобального фильтра, сначала закомментируйте локальное определение в файле Test.vue:
// filters:{
//capitalize: function (value) {
//if (!value) return ‘’
//value = value.toString()
//return value.charAt(0).toUpperCase() + value.slice(1)
//}
//}
Затем перейдите к файлу main.js в папке src и скопируйте приведенный ниже код перед оператором render:
Vue.filter(‘capitalize’, function (value) {
if (!value) return ‘’
value = value.toString()
return value.toUpperCase()
})
Запустите приложение еще раз. Оно работает так же, как и с локальным определением, однако на этот раз все написано заглавными буквами.
Полную версию кода для этого руководства можно найти здесь на GitHub.
Заключение
Мы ознакомились с фильтрами в Vue JS и узнали, насколько они важны для разработки пользовательского интерфейса приложений. Пределы применения фильтров зависят от разработчика: можно придумать множество способов форматирования данных на этой новой платформе. Спасибо за внимание! 🍺 😃
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Nwose Lotanna: Understanding Filters in Vue.js
