Пространство имен очень важно, какое бы приложение вы ни делали. Это приводит к появлению пользовательских фильтров Vue.js, которые можно без особых проблем объявить на глобальном уровне. В последнем уроке вы видели, как использовать фильтры и как мы можем определить их в самом основном приложении. Бывают ситуации, когда разделение ответственности необходимо и с ней приходится иметь дело независимо от внесенных изменений. В этой статье мы создадим три фильтра и разделим их с помощью метода Vue.filter(). Этот конкретный метод работает следующим образом
Vue.filter('Filter Name/id',[Filter Definition])
С приведенным выше определением нам может быть очень удобно определять несколько отдельных фильтров. В приведенном ниже примере я определил три разных глобальных фильтра. Эти фильтры выглядят одинаково по структуре, но выполняют разные функции. Мы также предоставили ему пространство имен под названием date_format, которое он использует для сохранения категорий. Давайте посмотрим на эти фильтры.
ПРИМЕЧАНИЕ. ЕСЛИ вы еще не настроили свое рабочее пространство, вы всегда можете обратиться к этим учебным пособиям, чтобы начать работу.
- Введение в Vue Framework?
- Начало работы с Vue с помощью Fiddle
- Изучите быструю обработку ввода пользователя и привязки форм с помощью Vue
- Легко связывать выбор и множественный выбор с помощью Vue
- Научитесь составлять список дел — создание компонентов Vue
- Список дел Vue с опцией удаления и глобальной шиной событий — Часть II
- Как создать глобальную шину событий с помощью Vue.js?
- Узнайте, как работать с вычисляемыми свойствами в VueJS
- Как использовать наблюдатели Vue.js для асинхронных обновлений?
- Создайте базовый HTML-редактор с помощью директивы Vuejs v-html
- Предотвратите XSS в Vue.js с помощью Google Caja
- Как работает обработка событий во Vue.js?
Vue.filter('date_format.MM/DD/YYYY', function(value) { return moment.unix(value).format('MM/DD/YYYY') }); Vue.filter('date_format.MMMM Do YYYY, h:mm:ss a', function(value) { return moment.unix(value).format('MMMM Do YYYY, h:mm:ss a') }); Vue.filter('date_format.dddd', function(value) { return moment.unix(value).format('dddd') });
Теперь из приведенного выше примера ясно, что каждый фильтр выполняет некоторые манипуляции с данными, а затем возвращает значение обратно в приложение. Это также приводит к разделению фильтров и приводит к правильному коду, в котором мы также поддерживаем пространство имен. HTML-реализация вышеизложенного будет выглядеть следующим образом:
<div id="app"> <span>Date in MM/DD/YYYY --> {{date | date_format.MM/DD/YYYY}}</span> <br> <span>Date in MMMM Do YYYY, h:mm:ss a --> {{date | date_format.MMMM Do YYYY, h:mm:ss a}}</span> <br> <span>Date in dddd --> {{date | date_format.dddd}}</span> </div>
Результирующие данные форматируются Values. Модуль приложения будет загружен с помощью приведенного ниже кода.
var app = new Vue({ el: '#app', data: { date: 1501288640 } });
Теперь давайте посмотрим все это вместе в действии. Вы можете перейти на JSFiddle или посмотреть на
Вывод
Надеюсь, теперь вы, ребята, поняли, как фильтры могут быть написаны отдельно, независимо от приложения. Это также делает приложение удобным в сопровождении и масштабируемым по мере того, как мы продвигаемся вперед в разработке нескольких компонентов. Кроме того, я также попрошу вас, ребята, просмотреть всю серию руководств, чтобы вы могли ознакомиться с различными аспектами Vue.js.
Первоначально опубликовано в The Web Juice.