Drupal и vue.js: как работать без jquery

Ср, 31/05/2017 - 18:11

drupal vue

Вольный перевод: https://www.adcisolutions.com/knowledge/drupal-vuejs-how-work-without-jquery

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

Зачем обращать внимание на Vue.js? О чем пойдет речь в статье?

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

Начало

Самый простой способ подключить библиотеку vue.js - используя тег script

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

Кроме этого можно использовать npm пакет или модуль drupal.

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

Увы, Drupal не позволяет нам разрабатывать современный реактивный пользовательский интерфейс.
В ядре есть jQuery - но эта либа, не для этих дел)
Попробуем Vue.js для улучшения некоторых пользовательских элементов Drupal.

К примеру, мы хотим показать кнопку "Создать нового пользователя" только тогда, когда заполнены поля "Почта" и "Имя пользователя".

<form enctype="multipart/form-data" action="/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">Username <span class="form-required" title="This field is required.">*</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">Email <span class="form-required" title="This field is required.">*</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="Create new account" 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>

<!-- using string template here to work around HTML <option> placement restriction -->
<script type="text/x-template" id="demo-template">
  <div>
    <p>Selected: {{ 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)
      // init select2
      .select2({ data: this.options })
      .val(this.value)
      .trigger('change')
      // emit event on change.
      .on('change', function () {
        vm.$emit('input', this.value)
      })
  },
  watch: {
    value: function (value) {
      // update value
      $(this.$el).val(value).trigger('change');
    },
    options: function (options) {
      // update 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-компоненты и позволить им работать с Virtual DOM.

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

Все что нужно для создания одностраничного приложения - есть в vue-router.

<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>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- <router-link> will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>

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

// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for routes: routes
})

// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')

Заключение

Как мы уже убедились - Vue.js прост в использвании, и полезен для проектов любого масштаба.
Надеюсь, после прочтения статьи, вы начнете удовлетворять свое любопытство на практике.
Сылки ниже могут быть полезны.

http://vuejs.org/
https://www.npmjs.com/package/vue
https://www.drupal.org/project/vuejs
http://about.gitlab.com/2016/10/20/why-we-chose-vue/
https://github.com/jcottrell/vue-example-contact-form
https://medium.freecodecamp.com/vue-js-introduction-for-people-who-know-just-enough-jquery-to-get-by-eab5aa193d77

2 Спасибо

Комментарии

Аватар пользователя bumble
3 недели 2 дня назад bumble #

На главной.

1 Спасибо
Аватар пользователя Studio VIZA
3 недели 2 дня назад Studio VIZA #

Спасибо, для новичков очень полезно.

0 Спасибо
Аватар пользователя multpix
3 недели 2 дня назад multpix #

Это больше для интересующихся vue.
И возможность поговорить на эту тему.

0 Спасибо
Аватар пользователя gun_dose
3 недели 2 дня назад gun_dose #

Лучше конечно о оторвать галаву целиком))) но для фрагментарного использования с twig или phptemplate лучше vue определённо нет ничего.

1 Спасибо