Статьи

Удалите jQuery из вашего проекта начальной загрузки (и замените его на Vue.js!)

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.