Что такое VueJS? Каковы основные особенности VueJS? 6

48. Компоненты одного файла нарушают разделение ответственности?

Что касается новейших современных разработок пользовательского интерфейса, разделение задач не равно разделению типов файлов. Поэтому предпочтительно разделять уровни кодовой базы на слабо связанные компоненты и составлять их, а не разделять кодовую базу на три огромных слоя, которые переплетаются друг с другом. Таким образом, отдельные файловые компоненты становятся более связными и удобными в обслуживании за счет объединения шаблонов, логики и стилей внутри компонента. Вы также можете поддерживать файлы javascript и CSS отдельно с помощью функций горячей перезагрузки и предварительной компиляции.
Например,

49. Какие проблемы решают однофайловые компоненты?

Однофайловые компоненты решают типичные проблемы, возникающие в приложениях, управляемых javascript, с расширением .vue. Список вопросов:
i. Глобальные определения заставляют уникальные имена для каждого компонента
ii. В строковых шаблонах отсутствует подсветка синтаксиса и требуется некрасивая косая черта для многострочного HTML.
iii. Отсутствие поддержки CSS означает, что, хотя HTML и JavaScript разделены на компоненты, CSS явно не учитывается.
iv. Ни один шаг сборки не ограничивает нас HTML и ES5 JavaScript, а не препроцессорами, такими как Pug (ранее Jade) и Babel.

50. Что такое фильтры?

Фильтры можно использовать для применения общего форматирования текста. Эти фильтры должны быть добавлены в конец выражения JavaScript, обозначенного символом «вертикальная черта». Вы можете использовать их в двух конкретных случаях:
i. mustaches интерполяции
ii. v-bind выражения
Например, давайте определим локальный фильтр с именем «Заглавные буквы» в параметрах компонента.
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

Теперь вы можете использовать фильтр либо в интерполяции mustaches, либо в выражении v-bind,

{{ username | capitalize }}

в v-bind -->