Система управления контентом Drupal с самого своего появления была отличной платформой для создания сайтов в Москве, Краснодаре, Владивостоке и т. д. Она предоставляла веб-разработчикам весь необходимый инструментарий для разработки веб-ресурсов любой сложности и назначения.
Начиная с 5-й версии, Drupal уже имеет в своем составе jQuery. Это всегда был отличный инструмент для разработчиков. Но в настоящее время возникает множество разных проблем, которые данная библиотека не может решить.
Почему я предлагаю вам обратить внимание на Vue.js? Я считаю, что это вовсе не еще один проходной фреймворк. Во-первых, у него достаточно высокий рейтинг; многие разработчики интерфейсов проявляют живой интерес к этому проекту, поэтому вы будете не одиноки, и все эти люди помогут вам, если у вас возникнут какие-либо вопросы. Во-вторых, у Vue.js есть большое и дружелюбное сообщество. Другой причиной для знакомства с Vue.js является Laravel. Да, вы правы, этот PHP фреймворк поддерживает Vue.js из коробки.
Если все сказанное все еще не убедило вас начать изучать и использовать Vue.js, то прочитайте эту статью до конца, и вы узнаете:
- Как можно улучшить интерфейс без использования jQuery;
- Как работать с компонентами Vue.js;
- Как интегрировать Vue.js со сторонними библиотеками;
- Как создать простое одностраничное приложение (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="//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
