Воссоздание компонентов Bootstrap на VueJS и Vanilla JavaScript (забудьте о jQuery) # 1

Итак… я решил начать серию статей на Medium, мне нравится писать статьи на Medium, так почему бы и нет…!

В этой статье я хочу воссоздать базовый пример раскрывающегося компонента, который вы можете найти при начальной загрузке. Http://getbootstrap.com/javascript/#dropdowns

Идея состоит в том, что вам не нужно получать jQuery (82 КБ), если вы не используете его активно в своих приложениях. 82КБ - это много. Не забывайте, что многие люди выходят в Интернет со своих мобильных телефонов, jQuery просто тратит их данные.

Таким образом, почему бы не создать компоненты Bootstrap на обычном JavaScript с небольшим количеством Vue JS за ним: D.

Не забывайте, что в 2017 году обязательно нужно изучить интерфейсные библиотеки, такие как React и Vue JS, и интерфейсные фреймворки, такие как Angular.

Вы будете шокированы, когда увидите, насколько просто создать раскрывающийся список в Vue JS.

Не забудьте подписаться на меня в социальных сетях, чтобы получать обновления для новых статей.

Twitter
https://twitter.com/devlob

Facebook:
https://www.facebook.com/hysarenato
https://www.facebook.com/devlob/

Instagram:
https://www.instagram.com/renato.hysa/

А у моего канала на YouTube сейчас 14 000 подписчиков!
https://www.youtube.com/channel/UCciGAxHS9o54cNxkRKb7Nfg

Давайте начнем!

Я буду делать все на JSFiddle, и вы можете переместить этот код в свои файлы .vue, если хотите.

Помните, что вы должны знать Vue JS и JavaScript.

Это рабочий пример

Https://jsfiddle.net/hysarenato/rdjjpc7a/4653/

Начнем сначала с HTML.

<div id=”app”>
 <a href=”#!” @click=”dropMeDown”>
  Drop me down
 </a>
 <ul class=”custom-dd” v-if=”visible”>
  <li>PHP</li>
  <li>Python</li>
  <li>JS</li>
 </ul>
</div>

Если вы знаете Vue JS или React, то знаете, что все должно находиться внутри родительского элемента. Здесь наш элемент - это div с идентификатором app.

У нас есть тег привязки, и при нажатии мы вызываем метод dropMeDown, который мы объявим через секунду во Vue JS.

Затем у нас есть элемент ul. Мы хотим отображать "ul" только в том случае, если "visible" истинно.

Код Vue JS

new Vue({
 el: ‘#app’,
 
 data: {
  visible: false
 },
 methods: {
  dropMeDown () {
   this.visible = !this.visible
  },
 }
})

Код Vue JS действительно прост.

Vue JS привязан к нашему родительскому div с идентификатором app.

Тогда в данных мы установили "visible" в значение false. Изначально это ложь, потому что мы хотим, чтобы пользователь щелкнул тег привязки, чтобы отобразить раскрывающийся список.

Наш метод довольно прост, мы переключаем значение "visible".

Если это правда, это станет ложью, если это ложь, станет правдой.

ВСЕ!

Вам действительно нужен jQuery для этого?

Разработчики в конечном итоге часто используют jQuery, но мы находимся в 2017 году, и сейчас тенденция заключается в использовании интерфейсной библиотеки и 100% ванильного JavaScript.

Это цель данной статьи. Поймите, что вы можете делать все на обычном JavaScript, без jQuery.

Я напишу больше статей, подобных этой, и, надеюсь, с этого момента вы избавитесь от jQuery и все больше и больше будете зависеть от ванильного JavaScript.

Взгляните на эти веб-сайты, чтобы получить лучшее представление.

Https://gist.github.com/liamcurry/2597326

Возможно, вам не понадобится jQuery
Примеры того, как выполнять стандартные операции с событиями, элементами, ajax и служебными программами с помощью простого javascript. youmightnotneedjquery.com

Давайте добавим CSS

На самом деле в этом нет необходимости, поскольку здесь мы больше сосредоточены на стороне JavaScript, но, чтобы он выглядел лучше, я добавил немного CSS.

Опять же, вы можете найти здесь рабочий пример.