0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: javascript, vuejs, программирование на javascript, js, директива v-if/v-else-if, роутер, динамические компоненты, tidyroutes</p>
1
<p>Теги: javascript, vuejs, программирование на javascript, js, директива v-if/v-else-if, роутер, динамические компоненты, tidyroutes</p>
2
<p>Управление тем, какую HTML-разметку и/или компоненты отображать на странице зависимости от значений в модели данных в приложении - задача, решаемая разными способами. Сегодня мы посмотрим, какие из них доступны в фронтенд-приложениях, написанных на<strong>VueJS</strong>.</p>
2
<p>Управление тем, какую HTML-разметку и/или компоненты отображать на странице зависимости от значений в модели данных в приложении - задача, решаемая разными способами. Сегодня мы посмотрим, какие из них доступны в фронтенд-приложениях, написанных на<strong>VueJS</strong>.</p>
3
<p>Подобная функциональность одна из базовых в любом приложении - начиная с простой замены текста на кнопке, заканчивая заменой целых фрагментов HTML-разметки и страницы целиком.</p>
3
<p>Подобная функциональность одна из базовых в любом приложении - начиная с простой замены текста на кнопке, заканчивая заменой целых фрагментов HTML-разметки и страницы целиком.</p>
4
<p>Использование Virtual DOM позволяет сделать процесс максимально эффективным с точки зрения скорости рендеринга HTML. Возможно, многие из вас подумают о роутере, как об одном из подходов. Но к нему мы подойдём чуть позже, начнём с более простых вариантов.</p>
4
<p>Использование Virtual DOM позволяет сделать процесс максимально эффективным с точки зрения скорости рендеринга HTML. Возможно, многие из вас подумают о роутере, как об одном из подходов. Но к нему мы подойдём чуть позже, начнём с более простых вариантов.</p>
5
<h2>1. Встроенная директива v-if/v-else-if</h2>
5
<h2>1. Встроенная директива v-if/v-else-if</h2>
6
<p><a>https://ru.vuejs.org/v2/guide/conditional.html</a></p>
6
<p><a>https://ru.vuejs.org/v2/guide/conditional.html</a></p>
7
<p><strong>Директива v-if</strong>используется для рендеринга блока по условию. Блок будет отображаться только в том случае, если выражение директивы возвращает значение, приводимое к true. Как следует из названия,<strong>v-else-if</strong>служит в качестве блока "else if" для директивы v-if. Можно объединять эти директивы в длинные цепочки:</p>
7
<p><strong>Директива v-if</strong>используется для рендеринга блока по условию. Блок будет отображаться только в том случае, если выражение директивы возвращает значение, приводимое к true. Как следует из названия,<strong>v-else-if</strong>служит в качестве блока "else if" для директивы v-if. Можно объединять эти директивы в длинные цепочки:</p>
8
<section v-if="showComponent=='foo'"> <Foo/> </section> <section v-else-if="showComponent=='bar'"> <Bar/> </section> <section v-else-if=”showComponent=='bazz'"> <Bazz/> </section><p>Обратите внимание, что при использовании директивы v-if компоненты<strong>будут полностью врезаться из DOM</strong>. Если вы хотите, чтобы они сохранялись в DOM-дереве, можно использовать<strong>v-show</strong>, правда, в этом случае нет удобства при использовании нескольких значений.</p>
8
<section v-if="showComponent=='foo'"> <Foo/> </section> <section v-else-if="showComponent=='bar'"> <Bar/> </section> <section v-else-if=”showComponent=='bazz'"> <Bazz/> </section><p>Обратите внимание, что при использовании директивы v-if компоненты<strong>будут полностью врезаться из DOM</strong>. Если вы хотите, чтобы они сохранялись в DOM-дереве, можно использовать<strong>v-show</strong>, правда, в этом случае нет удобства при использовании нескольких значений.</p>
9
<h2>2. Динамические компоненты</h2>
9
<h2>2. Динамические компоненты</h2>
10
<p>В<a>примере</a><strong>currentTabComponent</strong>может содержать: - имя зарегистрированного компонента, - объект с настройками компонента.</p>
10
<p>В<a>примере</a><strong>currentTabComponent</strong>может содержать: - имя зарегистрированного компонента, - объект с настройками компонента.</p>
11
<component v-bind:is="currentTabComponent"></component><p>При таком синтаксисе будет происходить пересоздание динамических компонентов. Но если мы хотим, чтобы экземпляры компонентов вкладок кэшировались после их создания, то в первый раз мы можем обернуть наш динамический компонент в элемент <keep-alive>:</p>
11
<component v-bind:is="currentTabComponent"></component><p>При таком синтаксисе будет происходить пересоздание динамических компонентов. Но если мы хотим, чтобы экземпляры компонентов вкладок кэшировались после их создания, то в первый раз мы можем обернуть наш динамический компонент в элемент <keep-alive>:</p>
12
<keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive><p>Полезно обратить внимание, что для использования этого синтаксиса есть<strong>определённые ограничения</strong>. Например, некоторые HTML-элементы (<ul>, <ol>, <table> и <select>) имеют ограничения на то, какие элементы могут отображаться внутри них, или, например, элементы <li>, <tr> и <option> могут появляться только внутри других определенных элементов.</p>
12
<keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive><p>Полезно обратить внимание, что для использования этого синтаксиса есть<strong>определённые ограничения</strong>. Например, некоторые HTML-элементы (<ul>, <ol>, <table> и <select>) имеют ограничения на то, какие элементы могут отображаться внутри них, или, например, элементы <li>, <tr> и <option> могут появляться только внутри других определенных элементов.</p>
13
<h2>3. Vue-router</h2>
13
<h2>3. Vue-router</h2>
14
<p>Роутер, безусловно, является решением для замены страницы целиком или отдельных её частей. Роутер для wi-fi является частью экосистемы, отлично поддерживается и хорошо задокументирован. Однако мы не будем уделять ему много времени в этой заметке, так как всегда можно посмотреть на<a>официальную документацию</a>.</p>
14
<p>Роутер, безусловно, является решением для замены страницы целиком или отдельных её частей. Роутер для wi-fi является частью экосистемы, отлично поддерживается и хорошо задокументирован. Однако мы не будем уделять ему много времени в этой заметке, так как всегда можно посмотреть на<a>официальную документацию</a>.</p>
15
<p>Мы же лучше давайте взглянем на альтернативы стандартному роутеру - это проекты, разработанные энтузиастами, которым чего-то не хватало в стандартной поставке роутера.</p>
15
<p>Мы же лучше давайте взглянем на альтернативы стандартному роутеру - это проекты, разработанные энтузиастами, которым чего-то не хватало в стандартной поставке роутера.</p>
16
<h2>4. React style router</h2>
16
<h2>4. React style router</h2>
17
<p><a>Декларативный роутер</a>, который позволяет описывать структуру роутов и компонентов в стиле<strong>React</strong>.</p>
17
<p><a>Декларативный роутер</a>, который позволяет описывать структуру роутов и компонентов в стиле<strong>React</strong>.</p>
18
<HistoryRouter> <div> <Route path="/foo"> <Foo/> </Route> <Route path="/bar/:id"> <Bar/> </Route> </div> </HistoryRouter><h2>5. Децентрализованное описание роутов - tidyroutes</h2>
18
<HistoryRouter> <div> <Route path="/foo"> <Foo/> </Route> <Route path="/bar/:id"> <Bar/> </Route> </div> </HistoryRouter><h2>5. Децентрализованное описание роутов - tidyroutes</h2>
19
<p><a>Этот подход</a>позволяет не писать одно огромное дерево всех роутов. Этот конфиг действительно может разрастись в сложном приложении, а описывать каждый роут по месту декларации новой страницы или нового компонента.</p>
19
<p><a>Этот подход</a>позволяет не писать одно огромное дерево всех роутов. Этот конфиг действительно может разрастись в сложном приложении, а описывать каждый роут по месту декларации новой страницы или нового компонента.</p>
20
// 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;<p>И далее подключаем всё в месте инициализации приложения.</p>
20
// 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;<p>И далее подключаем всё в месте инициализации приложения.</p>
21
// main.js import VueTidyRoutes from 'vue-tidyroutes'; Vue.use(VueRouter) const router = new VueRouter({ routes: VueTidyRoutes.export() })<p><em>Надеюсь, вам понравился этот обзор! Напишите, какими способами управления отображением компонентов в Vue пользуетесь вы.</em></p>
21
// main.js import VueTidyRoutes from 'vue-tidyroutes'; Vue.use(VueRouter) const router = new VueRouter({ routes: VueTidyRoutes.export() })<p><em>Надеюсь, вам понравился этот обзор! Напишите, какими способами управления отображением компонентов в Vue пользуетесь вы.</em></p>
22
22