Методы‌ ‌управления‌ ‌отображением‌ ‌компонентов‌ ‌Vue‌ | OTUS
⚡ Подписка на курсы OTUS!
Интенсивная прокачка навыков для IT-специалистов!
Подробнее

Курсы

Программирование
Python Developer. Professional
-3%
Разработчик на Spring Framework
-5%
iOS Developer. Professional
-8%
Golang Developer. Professional
-6%
Базы данных
-12%
Agile Project Manager
-5%
Android Developer. Professional
-11%
Microservice Architecture
-5%
C++ Developer. Professional
-5%
Highload Architect
-6%
JavaScript Developer. Basic
-8%
Backend-разработчик на PHP
-9%
Архитектура и шаблоны проектирования C# Developer. Professional
-9%
Team Lead
-6%
Kotlin Backend Developer
-9%
Разработчик программных роботов (RPA) на базе UiPath и PIX Unity Game Developer. Basic Разработчик голосовых ассистентов и чат-ботов Node.js Developer Интенсив «Оптимизация в Java» Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes iOS Developer. Basic Супер-интенсив «СУБД в высоконагруженных системах» Супер-интенсив "Tarantool"
Инфраструктура
DevOps практики и инструменты
-12%
Базы данных
-12%
Network engineer. Basic
-10%
Network engineer
-4%
Инфраструктурная платформа на основе Kubernetes
-6%
Экспресс-курс по управлению миграциями (DBVC)
-10%
Мониторинг и логирование: Zabbix, Prometheus, ELK
-10%
Administrator Linux. Professional
-6%
Разработчик IoT
-13%
Основы Windows Server Cloud Solution Architecture Разработчик голосовых ассистентов и чат-ботов VOIP инженер Супер-практикум по работе с протоколом BGP NoSQL Супер-практикум по использованию и настройке GIT Супер-интенсив «СУБД в высоконагруженных системах» Экспресс-курс «IaC Ansible»
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

Методы‌ ‌управления‌ ‌отображением‌ ‌компонентов‌ ‌Vue‌

JS_Deep_2.8-5020-d09525.png

Управление тем, какую HTML-разметку и/или компоненты отображать на странице зависимости от значений в модели данных в приложении — задача, решаемая разными способами. Сегодня мы посмотрим, какие из них доступны в фронтенд-приложениях, написанных на VueJS.

Подобная функциональность одна из базовых в любом приложении — начиная с простой замены текста на кнопке, заканчивая заменой целых фрагментов HTML-разметки и страницы целиком.

Использование Virtual DOM позволяет сделать процесс максимально эффективным с точки зрения скорости рендеринга HTML. Возможно, многие из вас подумают о роутере, как об одном из подходов. Но к нему мы подойдём чуть позже, начнём с более простых вариантов.

1. Встроенная директива v-if/v-else-if

https://ru.vuejs.org/v2/guide/conditional.html

Директива v-if используется для рендеринга блока по условию. Блок будет отображаться только в том случае, если выражение директивы возвращает значение, приводимое к true. Как следует из названия, v-else-if служит в качестве блока «else if» для директивы v-if. Можно объединять эти директивы в длинные цепочки:

<section v-if="showComponent=='foo'">
  <Foo/>
</section>
<section v-else-if="showComponent=='bar'">
  <Bar/>
</section>
<section v-else-if=showComponent=='bazz'">
  <Bazz/>
</section>

Обратите внимание, что при использовании директивы v-if компоненты будут полностью врезаться из DOM. Если вы хотите, чтобы они сохранялись в DOM-дереве, можно использовать v-show, правда, в этом случае нет удобства при использовании нескольких значений.

2. Динамические компоненты

В примере currentTabComponent может содержать: — имя зарегистрированного компонента, — объект с настройками компонента.

<component v-bind:is="currentTabComponent"></component>

При таком синтаксисе будет происходить пересоздание динамических компонентов. Но если мы хотим, чтобы экземпляры компонентов вкладок кэшировались после их создания, то в первый раз мы можем обернуть наш динамический компонент в элемент <keep-alive>:

<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive> 

Полезно обратить внимание, что для использования этого синтаксиса есть определённые ограничения. Например, некоторые HTML-элементы (<ul>, <ol>, <table> и <select>) имеют ограничения на то, какие элементы могут отображаться внутри них, или, например, элементы <li>, <tr> и <option> могут появляться только внутри других определенных элементов.

3. Vue-router

Роутер, безусловно, является решением для замены страницы целиком или отдельных её частей. Роутер для wi-fi является частью экосистемы, отлично поддерживается и хорошо задокументирован. Однако мы не будем уделять ему много времени в этой заметке, так как всегда можно посмотреть на официальную документацию.

Мы же лучше давайте взглянем на альтернативы стандартному роутеру — это проекты, разработанные энтузиастами, которым чего-то не хватало в стандартной поставке роутера.

4. React style router

Декларативный роутер, который позволяет описывать структуру роутов и компонентов в стиле React.

<HistoryRouter>
 <div>
   <Route path="/foo">
     <Foo/>
   </Route>
   <Route path="/bar/:id">
     <Bar/>
   </Route>
 </div>
</HistoryRouter>

5. Децентрализованное описание роутов — tidyroutes

Этот подход позволяет не писать одно огромное дерево всех роутов. Этот конфиг действительно может разрастись в сложном приложении, а описывать каждый роут по месту декларации новой страницы или нового компонента.

//  foo.js
import VueTidyRoutes from 'vue-tidyroutes';
const Component1 = {
data() {
},
props: [id]
template: '<div><h2>Component1</h2></div>'
};
VueTidyRoutes.route('/component1/id', {
   name: 'component1',
   component: Component1,
  props: true
});

export default Component1;

И далее подключаем всё в месте инициализации приложения.

//  main.js
import VueTidyRoutes from 'vue-tidyroutes';
Vue.use(VueRouter)
const router = new VueRouter({
   routes: VueTidyRoutes.export()
})

Надеюсь, вам понравился этот обзор! Напишите, какими способами управления отображением компонентов в Vue пользуетесь вы.

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться