Vue js — один из самых известных интерфейсных фреймворков для java-скриптов. Существует множество интерфейсных фреймворков java-скриптов, таких как Angular, React и т. д., но для добавления интерактивности в ваш DOM наряду со структурной гибкостью и облегчения повторного использования компонентов в вашем приложении Vue js — лучший выбор. В этой статье мы рассмотрим некоторые основы Vue js, которые вы должны знать, прежде чем отправиться в путешествие по изучению Vue js. Эта серия будет называться #BackToBasics. Итак, давайте начнем эту статью с изучения некоторых самых основ этого замечательного внешнего интерфейса.

Изучите основы Vue js за 5 минут

# Привязка данных

В Vue js существует два типа привязки данных. Первый — это односторонняя привязка данных, а второй — двусторонняя привязка данных. Позвольте мне объяснить вам каждый из них на простом непрофессиональном языке.

Односторонняя привязка данных означает, что он будет связывать данные непосредственно из вашего кода javascript с вашей DOM. Он гарантирует, что целевое свойство обновляется при изменении исходного свойства. Одним из прекрасных примеров этого типа привязки данных может быть отображение простого благодарственного сообщения или сообщения об успешном завершении после отправки формы со стороны пользователя.

Двухсторонняя привязка данных означает, что он будет связывать данные из вашего кода JavaScript с DOM и из DOM с вашим кодом JavaScript. Он обеспечивает отражение изменений в обоих направлениях — от цели к источнику и от источника к цели. . Вы можете использовать двустороннюю привязку данных, когда вам нужно обрабатывать пользовательский ввод. Например, что, если бы мы могли изменить значение message в DOM через ввод? Без проблем. Просто добавьте в документ ввод с атрибутом v-model и назначьте ему наше свойство сообщение.

# Директивы

Работа директивы заключается в реактивном применении побочных эффектов к DOM при изменении значения ее выражения. v-model — это директива. Есть и другие директивы, например, v-for позволяет отображать список элементов. Используйте его в сочетании с v-bind для установки свойств каждого элемента в списке.

Подобно шаблону v-if, вы также можете использовать тег с v-for для отображения блока из нескольких элементов. Директивы — это специальные атрибуты с префиксом v-. Ожидается, что значения атрибута директивы будут одним выражением JavaScript.

#Vue-экземпляр

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

var vm = new Vue({ // options })

Хотя это и не связано строго с MVVM (Model-view-viewmodel (MVVM) – это шаблон архитектуры программного обеспечения), дизайн Vue частично вдохновлен Это. По соглашению мы часто используем переменную vm (сокращение от ViewModel) для ссылки на наш экземпляр Vue.

Другими словами, мы можем рассматривать экземпляр Vue как посредника между вашими данными и представлением. Приложение Vue состоит из корневого экземпляра Vue, созданного с помощью new Vue, который может быть организован в виде дерева вложенных повторно используемых компонентов.

# Обработка событий

Мы можем использовать директиву v-on, чтобы прослушивать события DOM и запускать JavaScript, когда они инициируются. Модификатор директивы события вместе с директивой v-on автоматически заставляют событие что-то делать без явного кодирования его в обработчике событий. Например :-

.prevent, который автоматически вызывает preventDefault() при событии. Vue предоставляет модификаторы событий для v-on. Напомним, что модификаторы — это директивные постфиксы, обозначаемые точкой.

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

Теперь, когда мы рассмотрели четыре основы Vue js, вы можете перейти к Официальной документации, чтобы узнать больше о Vue js и приступить к созданию вашего следующего веб-приложения.

Ура! Удачного кодирования

Первоначально опубликовано на сайте techanical-atom.com 27 сентября 2018 г.