Привет, друг. Мой первый компонент, написанный на Vue — это автовыпадашка по поисковому запросу. Чтобы ты понимал, о чём я говорю — вспомни выпадающий список, который появляется, когда ты начинаешь вводить запрос в поисковой строке google:

При каждом нажатии клавиш поисковая выдача подстраивается под тебя, предлагая тебе наиболее релевантные варианты, которые ты возможно ищешь. Примерно тоже самое мне нужно было написать, когда я пару месяцев назад приступил к созданию одной большой и сложной формы, абсолютно ничего не зная о Vue.
Помимо практики и разъяснения того, что недавно понял сам — я опишу некий «журнал разработки»: какими шагами я шёл, чтобы понять ту или иную вещь. В частности, покажу как вообще можно подступиться к Vue и начать что-то делать. Оговорюсь сразу — если среди подписчиков есть люди, знающие Vue и работающие с ним — буду рад любой критике и обратной связи в целом. А теперь поехали.
Первое, что следует открыть — документацию. Она переведена на русский, выстроена в режиме от простого к сложному и местами понятна :). Скажу честно — прочитав первые разделы и дойдя до компонентов я всё ещё мало представлял, как подступиться к созданию и как вообще должна выглядеть структура проекта.
Если теория (даже с отработанными примерами) тебе понятна, но четкой картины не выстраивается (как было у меня), то советую весьма неплохой видос — «Уроки VUE.JS учим за 1 час». Да, звучит как откровенный кликбейт с примесью чего-то в стиле «С++ за 20 минут», но это редкое исключение. Автор, хоть и идёт по стандартной документации, проделал большую работу: чего стоит анимация, которая помогает визуально уяснить материал и примеры, расширяющие стандартную доку.
На второй день, немного поигравшись с атрибутами, событиями, я посмотрел ещё несколько манов, и пробросом пользовательских событий в компоненты-родители (ты же прочитал документация и понимаешь о чём я говорю, да?), наступил момент узнать, как правильно строить архитектуру файлов проекта. Тут есть замечательный видос, где автор описывает такой инструмент, как VUE-cli: «Learn Vue.js (RU) — Vue CLI». Он небольшой и советую его посмотреть, прежде чем идти дальше, потому что через пару минут мы будем его использовать. К слову, это 3-ий или 4-ый ман автора в плейлисте по Vue. Первые 3 — введение и основы, которые стоит глянуть как закрепление документации и видео с часовым разъяснением Vue.js.
Давай развернём пустой проект, прежде чем идти дальше. Открываем IDE и далее по протоколу:
- Ставим (если это ещё не сделано) vue-cli:
npm install -g @vue/cli
- Разворачиваем новый проект:
vue create vue-auto-complete
Где vue-auto-complete — название директории, где будут размещены файлы с исходным кодом.
На вопрос
Your connection to the default yarn registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? (Y/n)
Отвечаем — Y, потому как мы не особо привередливые и нам без разницы, откуда vue будет подтягивать сорцы.
Затем нужно выбрать дефолтный вариант — использовать babel и eslint.
Затем — использовать npm или yarn. Я выбрал npm, ты же можешь выбрать что-то на свой вкус.

Теперь открой проект в IDE (у меня это PhpStorm) и увидишь следующую структуру проекта:

А теперь открой консоль и введи:
npm run build
npm run serve

Теперь самое время укрыться пледом, налить кофейка и посмотреть ещё 3 видоса, чтобы понять что такое компоненты и с чем их едят. Тема компонентов раскрывалась первый раз в документации, а теперь её нужно закрепить. Автор нам уже известен, собсно, привожу ссылки на видео:
- Learn Vue.js (RU) — Компоненты #1 — типы и методы создания
- Learn Vue.js (RU) — Компоненты #2 — передача и возврат параметров (props and emit)
- Learn Vue.js (RU) — Компоненты #3 — функции как параметры и объект Vue для хранения состояния
На тему компонентов у автора 5 уроков, но чтобы продолжить работу хватит и первых трёх.
Посмотрел? Едем дальше. А дальше обсудим, как должна работать авто-выпадашка. Как минимум — нужны API, которые будут искать данные в какой-либо таблице по фильтру. Фильтр — то, что пользователь вводит в input’е (в примере выше это была поисковая строка в google). Input мы можем связать через v-model с какой-либо переменной и повесить событие на onkeypress, к которому привязать некоторую функцию. В функции мы можем получить то, что пользователь только что ввёл в input, верно? Верно. А значит — можем отправить это значение на сервер, где в репозитории Symfony найдёт в базе наиболее похожие варианты и вернёт их в ответе. Этот ответ мы выведем как список под input’ом. Вот, в самом простом случае, и всё.
Давай сначала набросаем вёрстку. Как ты понял из видео выше, вся вёрстка описывается в разделе <template></template>, в файле компонента. Пока мы не будем создавать новые, а будем работать с теми, которые vue-cli для нас любезно подготовил. Переименуй компонент HelloWorld.vue в AutoComplete.vue, затем открывай и удаляй всё из секции template, script и style. Должен остаться пустой шаблон:

К слову, если посмотреть на то, что выводит localhost:8080, то мы увидим пустую страницу:

Так как обновление идёт автоматически.
Создаём input, который через директиву v-model связываем с переменной filter:
<template>
<div class="autocomplete">
<input
type="text"
v-model="filter"
>
</div>
</template>
<script>
export default {
data: function() {
return {
filter: null,
}
}
}
</script>
Как проверить, корректно ли всё связалось? Давай просто выведем filter перед input’ом:
<template>
<div class="autocomplete">
{{filter}}
<input
type="text"
v-model="filter"
>
</div>
</template>
<script>
export default {
data: function() {
return {
filter: null
}
}
}
</script>
Теперь открой браузер и что-либо введи в input:

Вот и реактивность в действии. Круто, да?
Теперь давай через «@» навешаем событие на наш input и привяжем к нему функцию-обработчик:
<template>
<div class="autocomplete">
<input
type="text"
v-model="filter"
@keypress="filterOnKeyPress"
>
</div>
</template>
<script>
export default {
data: function() {
return {
filter: null
}
},
methods: {
filterOnKeyPress() {
console.log(this.filter);
}
}
}
</script>
Теперь любая строка, введённая в input будет печататься в консоли:

Причём печатается она по символам: одно нажатие на клавиатуру — одно срабатывание события. В следующих статьях я покажу, как оптимизировать этот процесс: мы познакомимся с библиотекой lodash и немного копнём в асинхронное программирование на es6.
По плану — мы выполнили половину задачи. Теперь в функции-обработчике теперь нужно отправлять запрос на сервер, получать данные и записывать их в какую-либо переменную, которую рендерить через v-for. Но об этом я расскажу завтра.
Кстати, если тебе интересно моё корявое объяснение всего вышепроисходящего — пиши, постараюсь изложить как можно подробнее. Хотя в материалах, приведённых выше, это всё уже есть.
Спасибо, что читаешь, друг. Надеюсь, что теперь статьи и заметки будут почти каждый день 🙂