Пространство имен очень важно, какое бы приложение вы ни делали. Это приводит к появлению пользовательских фильтров Vue.js, которые можно без особых проблем объявить на глобальном уровне. В последнем уроке вы видели, как использовать фильтры и как мы можем определить их в самом основном приложении. Бывают ситуации, когда разделение ответственности необходимо и с ней приходится иметь дело независимо от внесенных изменений. В этой статье мы создадим три фильтра и разделим их с помощью метода Vue.filter(). Этот конкретный метод работает следующим образом

Vue.filter('Filter Name/id',[Filter Definition])

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

ПРИМЕЧАНИЕ. ЕСЛИ вы еще не настроили свое рабочее пространство, вы всегда можете обратиться к этим учебным пособиям, чтобы начать работу.

  1. Введение в Vue Framework?
  2. Начало работы с Vue с помощью Fiddle
  3. Изучите быструю обработку ввода пользователя и привязки форм с помощью Vue
  4. Легко связывать выбор и множественный выбор с помощью Vue
  5. Научитесь составлять список дел — создание компонентов Vue
  6. Список дел Vue с опцией удаления и глобальной шиной событий — Часть II
  7. Как создать глобальную шину событий с помощью Vue.js?
  8. Узнайте, как работать с вычисляемыми свойствами в VueJS
  9. Как использовать наблюдатели Vue.js для асинхронных обновлений?
  10. Создайте базовый HTML-редактор с помощью директивы Vuejs v-html
  11. Предотвратите XSS в Vue.js с помощью Google Caja
  12. Как работает обработка событий во 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.