Новое поколение Frontend Development
В последние годы мы пережили рождение нескольких интерфейсных приложений, которые нацелены на решение нескольких проблем в разработке веб-приложений по-своему. Несколько пресловутых примеров:
- AngularJS
- ReactJS
- Рули
Эти фреймворки оказались настолько успешными в решении большинства проблем внешнего интерфейса, что они предложили целый новый способ разработки веб-приложений во внешнем интерфейсе, который является высокоэффективным, быстрым, надежным и масштабируемым.
Если вы какое-то время были веб-разработчиком, вы, должно быть, уже знакомы с модификацией DOM как с помощью необработанного Javascript, так и с помощью JQuery.
Хотя этот классический подход к модификации DOM с помощью javascript или JQuery довольно прост, он требует больших затрат времени на разработку и большую часть времени с неожиданными ошибками и поведением из-за необходимости контролировать все модификации DOM и все возможные часто возникающие ошибки, он также генерирует код, который большую часть времени не масштабируется.
Такие фреймворки, как классический AngularJS или ReactJS, установили новый способ взаимодействия с динамическими данными и привязки их к DOM без необходимости использования огромных методов и скриптов, чтобы, например, добавить элемент, полученный с сервера, в неупорядоченный список.
В этом случае VueJS берет множество очень успешных концепций из этих фреймворков и делает шаг вперед, будучи легко адаптируемым, быстрым и очень удобным для обучения.
Связывание данных
Одна из таких успешных концепций - привязка данных. Привязка данных родилась из-за необходимости иметь управляемую модель DOM, чтобы избежать необходимости вручную изменять ее каждый раз, когда наши данные меняются. Это очень мощная функция VueJS, которая позволяет нам изменять наши данные и видеть изменения, отраженные в dom, без их модификации.
Например, давайте создадим еще одно очень простое приложение:
Это отобразит следующие данные во время выполнения:
Используя экземпляр Vue, мы также можем изменить эти данные извне и сразу увидеть изменения, отраженные в DOM:
Это отобразит следующие данные во время выполнения:
Директивы v-if v-else
Хорошо, мы уже знакомы с привязкой данных, очень мощной и понятной функцией, которая позволяет нам видеть, как наши данные отражаются в модели DOM.
На VueJS у нас есть условная директива рендеринга, которая позволяет нам рендерить кусок нашей DOM, если условие выполнено, давайте рассмотрим следующий пример
Если мы увеличим возраст Джона до 22, блок v-if будет выполнен и обработан.
Примечание. Условный рендеринг не работает путем скрытия или отображения частей DOM, он работает путем их удаления или добавления обратно в DOM, для использования условного отображения используйте директиву v-show
Директива v-for
Создавать коллекции и перечисленные элементы во Vue очень просто, директива v-for позволяет нам привязать список к dom.
Мы можем добавлять или удалять элементы в массив FavoriteDrinks динамически, используя функции массива Javascript:
Экземпляр vue: методы
Экземпляр vue поддерживает настраиваемые методы (функции), которые позволяют нам выполнять настраиваемые операции с данными. Пример:
Вы также можете определить параметры своих методов:
incrementAge: function (amount) { this.age = this.age + amount }// On the console: testApp.incrementAge(5)
Директива v-on
Директива v-on позволяет нам привязать метод нашего экземпляра vue к событию HTML.
Примечание. v-on можно переписать с помощью сокращения @
Пример:
Экземпляр vue: вычисляемые свойства
Вычисленные свойства позволяют нам привязать нашу DOM к вычисляемым данным, мы могли бы добиться того же, используя методы, но разница здесь в том, что экземпляр VUE кэширует наши вычисленные свойства для достижения наилучшей возможной производительности.
В следующем примере мы собираемся привязать наши данные ко всем напиткам, которые начинаются с B:
Привязка данных: двусторонняя привязка данных и директива v-model
В VueJS выполнять двустороннюю привязку данных со значениями формы очень просто, эта функция позволяет нам привязать переменную к входу, позволяя привязать переменную к значению формы и к данным одновременно.
Пример:
Это обновит наши привязки к имени сразу после ввода текста в текстовое поле.
Для числовых текстовых полей: используйте v-model.number, чтобы связать значение с числом, иначе вы получите строковую привязку на стороне ввода.
Пример Todos:
Пример Todos с Vuetify
