Drupal & Vue.js: как работать без jQuery

Система управления контентом Drupal с самого своего появления была отличной платформой для создания сайтов в Москве, Краснодаре, Владивостоке и т. д. Она предоставляла веб-разработчикам весь необходимый инструментарий для разработки веб-ресурсов любой сложности и назначения.

Начиная с 5-й версии, Drupal уже имеет в своем составе jQuery. Это всегда был отличный инструмент для разработчиков. Но в настоящее время возникает множество разных проблем, которые данная библиотека не может решить.

Почему я предлагаю вам обратить внимание на Vue.js? Я считаю, что это вовсе не еще один проходной фреймворк. Во-первых, у него достаточно высокий рейтинг; многие разработчики интерфейсов проявляют живой интерес к этому проекту, поэтому вы будете не одиноки, и все эти люди помогут вам, если у вас возникнут какие-либо вопросы. Во-вторых, у Vue.js есть большое и дружелюбное сообщество. Другой причиной для знакомства с Vue.js является Laravel. Да, вы правы, этот PHP фреймворк поддерживает Vue.js из коробки.

Если все сказанное все еще не убедило вас начать изучать и использовать Vue.js, то прочитайте эту статью до конца, и вы узнаете:

  1. Как можно улучшить интерфейс без использования jQuery;
  2. Как работать с компонентами Vue.js;
  3. Как интегрировать Vue.js со сторонними библиотеками;
  4. Как создать простое одностраничное приложение (SPA).

Подключение

Начнем мы знакомство с Vue.js с описания того, как подключить этот фреймворк к нашим проектам. И здесь подойдет самый простой способ — использование тега <script>.


<script src="https://unpkg.com/vue"> </script>

Кроме того, вы можете попробовать подключать при помощи пакет npm или в модуле Drupal.

Улучшение пользовательского интерфейса

К сожалению, Drupal не позволяет разрабатывать современный "реактивный" или откликающийся пользовательский интерфейс. В ядре Drupal интегрирован jQuery, а данная библиотека не способна построить подобный интерфейс. Для улучшения некоторых пользовательских элементов Drupal, я предлагаю попробовать Vue.js.

Например, мы хотим показать кнопку "Создать новую учетную запись", только в том случае, если поля "Электронная почта" и "Имя пользователя" заполнены.


<form enctype="multipart/form-data" action="http://msiter.ru/user/register" method="post" id="user-register-form" accept-charset="UTF-8">
   <div id="edit-account" class="form-wrapper">
     <div class="form-item form-type-textfield form-item-name">
         <label for="edit-name">Имя пользователя <span class="form-required" title="Это поле обязательно.">*</span></label>
         <input class="username form-text required" autocapitalize="none"
                       type="text" id="edit-name" name="name" value="" size="60" maxlength="60" v-model="name">
     </div>

     <div class="form-item form-type-textfield form-item-mail">
        <label for="edit-mail">Электронная почта <span class="form-required" title="Это поле обязательно.">*</span></label>
        <input type="text" id="edit-mail" name="mail" value="" size="60" maxlength="254" class="form-text required" v-model="mail">
     </div>

     <div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Создать новую учетную запись" class="form-submit" v-show="name && mail"></div>
   </div>
</form>

var app = new Vue({
  el: '#user-register-form',
  data: {
  	name: '',
    mail: '',
  }
})

Компоненты Vue.js

Всем известно, что типичный разработчик стремится не изобретать колесо, а использует уже готовые решения. Сообщество Vue.js может предложить множество потрясающих компонентов. Попробуем использовать один из них.

Я считаю, что пользовательские входные данные должны проверяться как во внутреннем, так и во внешнем интерфейсе. Поэтому добавим


<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.25/vee-validate.js"> </script>

"Vee-validate" - это легкий плагин для Vue.js, который позволяет проверять поля ввода и отображать ошибки.©

Кроме этого необходимо изменить элементы ввода:


<input class="username form-text required" autocapitalize="none" type="text" id="edit-name"
              name="name" value="" size="60" maxlength="60" v-model="name" v-validate.initial="name"
              data-rules="required|alpha|min:3">

<input type="text" id="edit-mail" name="mail" value="" size="60" maxlength="254"
              class="form-text required" v-model="mail" v-validate.initial="email"
              data-rules="required|email">

Как вы можете видеть, Vue.js и его компоненты позволяют легко улучшать существующие элементы. И я не вижу никаких причин не делать этого в ваших проектах уже сейчас. Однако, думаю, у вас есть вопрос, как использовать этот фреймворк вместе с другими библиотеками. Ну что ж, давайте продолжим.

Vue.js и другие библиотека

В следующем примере мы интегрируем сторонний плагин jQuery (select2), обернув его пользовательским компонентом.


<div id="el"></div>

<!-- здесь используем строковый шаблон, чтобы обойти ограничение HTML тега <option> -->
<script type="text/x-template" id="demo-template">
  <div>
    <p>Выбрано: {{ selected }}</p>
    <select2 :options="options" v-model="selected">
      <option disabled value="0">Select one</option>
    </select2>
  </div>
</script>

<script type="text/x-template" id="select2-template">
  <select>
    <slot></slot>
  </select>
</script>

Vue.component('select2', {
  props: ['options', 'value'],
  template: '#select2-template',
  mounted: function () {
    var vm = this
    $(this.$el)
      // инициализируем select2
      .select2({ data: this.options })
      .val(this.value)
      .trigger('change')
      // обрабатываем событие при изменении
      .on('change', function () {
        vm.$emit('input', this.value)
      })
  },
  watch: {
    value: function (value) {
      // обновляем значение
      $(this.$el).val(value).trigger('change');
    },
    options: function (options) {
      // обновляем опции
      $(this.$el).select2({ data: options })
    }
  },
  destroyed: function () {
    $(this.$el).off().select2('destroy')
  }
})

var vm = new Vue({
  el: '#el',
  template: '#demo-template',
  data: {
    selected: 2,
    options: [
      { id: 1, text: 'Hello' },
      { id: 2, text: 'World' }
    ]
  }
});

Vue.js не ведет себя так, как будто он один на сайте (да, я говорю о React ;) ). Вы сможете использовать другие js-компоненты и допускать их к работе с виртуальным DOM.

Одностраничное приложение

Как обычно, самое интересное мы оставили на последок. Вы можете найти все, что нужно для создания одностраничных приложений (SPA) в vue-router 2. Просто включите это:


<script src=”https://unpkg.com/vue-router/dist/vue-router.js”></script> 

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- используем компонент router-link для навигации. -->
    <!-- определяем ссылку, передавая свойство `to`. -->
    <!-- по умолчанию <router-link> будет рендериться в тег `<a>` -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- выход для маршрута -->
  <!-- компонент, соответствующий маршруту будет рендериться здесь -->
  <router-view></router-view>
</div>

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// Каждый маршрут должен отображаться в компоненте. "Компонент" может
// либо быть фактическим конструктором компонента, созданным посредством
// Vue.extend () или просто объектом параметров компонента.
// Мы поговорим о вложенных маршрутах позже.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// Вы можете передать дополнительные опции здесь, но сейчас
// не будем усложнять и оставим все в простом виде
const router = new VueRouter({
  routes // короткая запись "routes: routes"
})

// Убедимся, что внедрили маршрутизатор с параметром маршрутизации, чтобы
// наше приложения имело доступ ко всем необходимым путям
const app = new Vue({
  router
}).$mount('#app')

Заключение

Мы прошли все шаги: от простейшего примера до SPA. Я показал вам, что Vue.js очень прост и полезен для любых проектов. Надеюсь, после прочтения этой статьи у вас возникнет желание ближе ознакомиться данной темой.

Перевод статьи Drupal & Vue.js: how to work without jQuery