Сегодня вы узнаете, как использовать Vue.js и ES6 вместе с некоторыми фиктивными данными для создания минимального поиска по базе данных. Опять же, цель этих руководств #lunchbreak — применить знания, которые у вас уже есть, получить небольшое представление о чем-то новом и получить еще несколько коммитов в вашем Github. Ознакомиться с реализованным проектом можно здесь — Поиск товара. Меня вдохновило попробовать Vue.js во время просмотра курса Сары Драснер Введение в Vue.js на FrontEndMasters.
Начнем наш проект. Откройте свой редактор (я использую VS Code — мне это нравится) и создайте новый проект с папкой под названием productSearch. Если вы используете VSCode, откройте терминал (control + `) и настройте его.
В вашем терминале введите следующие команды:
- npm init -y (добавьте -y, чтобы пропустить все эти вопросы)
2. git инициировать
Мы создадим все наши исходные файлы из терминала. Убедитесь, что вы находитесь в папке productSearch.
3. коснитесь index.html index.js db.js style.css .gitignore .babelrc webpack.config.js‹‹‹ Это создаст все ваши файлы в вашей папке. Пока не беспокойтесь о том, что в них находится.
4. Теперь мы можем установить наши зависимости.
Хорошо! Ты сделал это!
Настройте свой файл webpack.config.js
Мне нравится Webpack, и это простой способ использования Babel. И поскольку мы будем использовать некоторые функции ES6 — в основном только импорт/экспорт и некоторые литералы шаблонов. Я стараюсь включать фотографии, а не сам код, чтобы люди печатали его сами. Так вы узнаете больше.
Настройте свой файл .babelrc
Babel — ваш компилятор. Это гарантирует, что любые ваши функции ES6 будут скомпилированы в старый добрый ES5, который поддерживают все браузеры. И хотя это может стать гораздо более подробным, все, что вам нужно сделать, это установить этот пресет на env. Это означает, что Babel не потребует от вас использования специального кода ES6 или ES7. Он просто поймет, что все это для вас.
Наша база данных продуктов
Мы будем использовать случайную базу данных, которую я погуглил, это база данных товаров для дома. Я скопировал и вставил объект и поместил его в наш файл db.js. С этой информацией важно то, что я не хочу оставлять ее в своем файле index.js.
Так что давайте оставим это в отдельном файле и экспортируем в остальную часть проекта, используя export const data.
Теперь мы можем импортировать эти данные в наш индексный файл. В идеале вы должны разместить это на сервере и использовать что-то вроде axios для выполнения запроса на получение, но на этот раз мы сделаем все это локально.
Импорт нашей базы данных
Давайте импортируем эти данные, чтобы мы могли получить к ним доступ из нашего файла index.js. Вы можете использовать console.log(data) и просмотреть всю базу данных.
Настройка Vue.js
Что вам больше всего понравится в Vue.js, так это простота его использования. Просто импортируйте его со страницы установки здесь. Включите скрипт в свой index.html и бум. Ты готов.
Сначала у нас будет ввод, пустой элемент абзаца и пустой неупорядоченный список в index.html. Мы будем изменять это тонну.
Теперь давайте перейдем к нашему файлу index.js.
У нас должна быть только одна строка, импортирующая наши данные из db.js. Теперь мы можем создать экземпляр Vue.
Нашему приложению назначается новый экземпляр Vue, в котором мы ссылаемся на элемент el или DOM, на который нацелен Vue. За ним следует объект данных, который является ссылкой на нашу базу данных. Мы просто говорим Vue здесь, что элементы будут равны тем данным, которые мы извлекли. И мы добавим покупки в наш объект данных, чтобы ссылаться на строку в нашем входном значении. Все это мы будем использовать позже.
Создание наших методов
Классной особенностью экземпляра Vue является метод экземпляра. Это объект функций, которые вы можете использовать в виртуальном DOM. Сначала мы создадим наши функции в простых функциях Javascript, а затем исправим их как методы Vue во второй части.
Давайте создадим функцию с именем getItems(). И, честное слово, я уверен, что многое может стать проще, но именно поэтому мы пишем код как можно чаще. Так что мы можем разобраться в этих вещах. На данный момент это то, что вы получаете.
Функция getItems() будет перебирать нашу базу данных и сопоставлять наш параметр value с любыми элементами в нашей базе данных. Важной частью является настройка нашего экземпляра Vue для предоставления массива совпадающих терминов в нашей базе данных, чтобы мы могли показать это на нашей странице. Мы отправляем литерал шаблона, который объединяет штрих-код и связанный с ним элемент.
Далее мы привяжем событие keyup к нашему вводу. Таким образом, наш элемент неупорядоченного списка будет обновляться соответствующими элементами каждый раз, когда мы вводим новый символ.
Теперь, когда мы настроили эти функции, мы можем реализовать еще несколько функций Vue в нашем файле index.html. Тогда мы, по крайней мере, сможем видеть, что происходит, и чувствовать себя хорошо.
Реализация нашей логики Vue
В конечном счете, мы хотим, чтобы наш проект выглядел так. Итак, давайте перейдем к нашему файлу index.html.
Чтобы это произошло, мы должны дать Vue несколько ориентиров. Во-первых, мы назначим ввод v-model = «shopping». В нашем index.js мы также должны добавить ссылку на покупку в наш объект данных.
Затем мы будем ссылаться на модель покупок, используя теги усов {{ }} в элементе ‹p› {{shopping }} ‹/p› под нашим элементом ввода.
Теперь вы должны иметь возможность печатать и видеть вводимый текст прямо под ним по мере ввода. Осталась последняя часть функциональности, прежде чем мы почувствуем, что достигли чего-то.
Используя v-for, директиву Vue, мы создаем цикл for, который показывает каждый элемент в нашем обновленном массиве элементов по мере того, как мы обновляем наши входные данные о покупках.
Конец части 1
Теперь вы должны иметь возможность фильтровать свою базу данных и находить совпадающие термины. Мы использовали массу различных функций, но, по правде говоря, мы не были очень эффективными, но положительный момент в том, что мы научились кое-чему, ненадолго задействовали свои навыки кодирования и, надеюсь, познакомились с Vue.js и некоторыми другими. особенности впервые.
Я сделаю все возможное, чтобы выпустить туториал второй части в ближайшее время, но я все еще работаю над ним сам! Не стесняйтесь сделать свою собственную часть 2 и поделиться ею со мной. Как будто я сейчас занимаюсь парным программированием с миром.
До скорого. Следите за мной на twitter.com/jawannforall и давайте общаться! Не стесняйтесь ругать меня за то, что я сделал неправильно — я делаю это, чтобы учиться!
