Удалите 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>

<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>

<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>

new Vue({
 el: '#tabs',
 data: { 
   // Tab 1 is selected by default
   tab: 1 
 }
});

<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>

new Vue({
  el: '#app',
  data: { 
    show: false 
  },
  methods: {
    toggle() { this.show = !this.show; }
  },
  computed: {
    modalStyle() {
      return this.show ? 
        { 'padding-left': '0px;', display: 'block' } : {};
    }
  }
});