Bootstrap — самая популярная структура веб-страниц в Интернете. Я не знаю более быстрого способа создания адаптивного веб-проекта, чем с помощью Bootstrap.
Но так как мой инструмент для добавления динамической функциональности на страницу теперь Vue.js, становится все труднее оправдать Bootstrap, потому что он приносит с собой некоторый багаж … Я говорю о jQuery.
Это не баг jQuery, это просто признание существенных недостатков в добавлении jQuery в проект, когда вы уже используете фреймворк, такой как Vue:
- Накладные расходы. jQuery добавит 30 КБ к размеру вашей страницы.
- jQuery может быть сложно настроить с помощью таких пакетов, как Webpack.
- Когда вы назначаете Vue ответственным за DOM, вы не хотите, чтобы jQuery все испортил.
Если вы используете Vue, но вы действительно хотите использовать CSS-среду Bootstrap, тогда у вас есть сложный выбор: стоит ли компромисс добавления jQuery?
Прежде чем вы решите, есть еще один вариант …
Полностью удалите JavaScript-плагины jQuery и Bootstrap
Есть замечательный проект под названием vue-strap, который заменяет плагины jQuery в Bootstrap на плагины, созданные в Vue.js. Таким образом, у вас будут все ваши плагины Bootstrap, такие как модалы, карусели, вкладки и т. Д. На базе Vue.
Но если вам нужно использовать только несколько виджетов Bootstrap, я думаю, что так просто свернуть ваши собственные плагины с помощью Vue.js, что вам также может не понадобиться vue-strap.
Позвольте мне показать вам, как настроить несколько распространенных плагинов Bootstrap с нуля, используя Vue.js.
Сделай сам виджет Bootstrap Работает на Vue.js
Вкладки
Начнем с вкладок. Для каждой вкладки должна быть соответствующая панель вкладок. Показ / скрытие достигается добавлением / удалением класса active
как на вкладке, так и на панели вкладок, поэтому Vue нужно будет обработать.
<div id="tabs">
<ul class="nav nav-tabs">
<li><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane">Pane 1</div>
<div class="tab-pane">Pane 2</div>
</div>
</div>
Мы будем отслеживать, какая вкладка в настоящий момент выбрана с помощью переменной tab
, и использовать ее для добавления / удаления active
класса на каждой вкладке и панели вкладок:
<div id="tabs">
<ul class="nav nav-tabs">
<li v-bind:class="{ active: tab === 1}"><a>Tab 1</a></li>
<li v-bind:class="{ active: tab === 2}"><a>Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" v-bind:class="{ active: tab === 1}">
Pane 1</div>
<div class="tab-pane" v-bind:class="{ active: tab === 2}">
Pane 2</div>
</div>
</div>
Нам также нужно прослушивать событие щелчка на каждой вкладке, которое обновляет нашу tab
переменную:
<div id="tabs">
<ul class="nav nav-tabs">
<li v-bind:class="{ active: tab === 1}" v-on:click="tab = 1">
<a>Tab 1</a>
</li>
<li v-bind:class="{ active: tab === 2}" v-on:click="tab = 2">
<a>Tab 2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" v-bind:class="{ active: tab === 1}">
Pane 1</div>
<div class="tab-pane" v-bind:class="{ active: tab === 2}">
Pane 2</div>
</div>
</div>
Наконец, JavaScript:
new Vue({
el: '#tabs',
data: {
// Tab 1 is selected by default
tab: 1
}
});
Мы можем сделать еще несколько улучшений, которые я не буду показывать для краткости этой статьи:
- Оберните JavaScript в Vue Component, чтобы мы могли повторно использовать код вкладок на сайте.
- Для действительно компактного шаблона и очень быстрого рендеринга поместите содержимое вкладки и панели вкладок в свойство данных массива и используйте
v-for
для распечатки списка вкладок / панелей вкладок.
модальный
Модальный диалог — один из моих любимых плагинов Bootstrap. Подобно вкладкам, мы показываем / скрываем модальные, добавляя / удаляя класс, in
который вызывается кнопками открытия и закрытия:
<div id="app" v-bind:class=" { 'modal-open': show }">
<button class="btn btn-primary" v-on:click="toggle">
Open
</button>
<div class="modal" tabindex="-1" v-bind:class="{ in: show }"
v-bind:style="modalStyle">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>Vue-powered modal!</p>
</div>
<div class="modal-footer">
<button class="btn" v-on:click="toggle">Close</button>
</div>
</div>
</div>
</div>
</div>
В модале Bootstrap нам нужен динамический встроенный стиль в диалоге. Мы достигаем этого с помощью v-bind:style
директивы, которая получает «объект стиля» из вычисляемого свойства. Вычисляемое свойство будет пересчитывать каждый раз, когда изменяется зависимая переменная show:
new Vue({
el: '#app',
data: {
show: false
},
methods: {
toggle() { this.show = !this.show; }
},
computed: {
modalStyle() {
return this.show ?
{ 'padding-left': '0px;', display: 'block' } : {};
}
}
});
Вы также можете улучшить свой модальный режим, используя Vue Transition для анимации постепенного изменения модального режима, когда он входит и выходит из DOM.
Подумайте об использовании Vue.js в вашем следующем проекте начальной загрузки и выходе из jQuery
Вы не только можете заменить jQuery на Vue.js в Bootstrap, но, возможно, вам следует. Используете ли вы Vue-Strap или катите свои собственные плагины, вот некоторые заманчивые преимущества Vue:
- Система обновления DOM от Vue обеспечивает превосходную производительность и скорость реагирования по сравнению с jQuery.
- Vue предназначен для создания небольших изолированных фрагментов пользовательского интерфейса и отлично справляется с этой задачей, поэтому встроенные в Vue виджеты будут более расширяемыми и поддерживаемыми, чем jQuery.
- У виджетов начальной загрузки есть заведомо грязные шаблоны, поэтому Vue может помочь облегчить это с помощью своих гибких опций шаблонов, таких как JSX, одностраничных компонентов, функций рендеринга, привязки классов и стилей и т. Д.
Имейте в виду, что Vue не поддерживает IE8, но в противном случае вы могли бы рассмотреть это для вашего следующего проекта Bootstrap.