Шпаргалка по Vue.js

Общие команды и инструкции, которые вы будете использовать в повседневных сеансах программирования на Vue.js.

Директивы

Директивы - это атрибуты, определяемыеv-префикс.

Директива Описание
v-text использует свойство как текстовое значение элемента
v-html использует свойство как текстовое значение элемента, интерпретируя HTML
v-if показывать элемент, только если условие истинно
v-else показывает альтернативный элемент, если предыдущийv-ifложно
v-else-if добавляет блок else if дляv-ifстроить
v-show похожий наv-if, но добавляет элемент в DOM, даже если он является ложным. Просто установите его наdisplay: none.
v-for выполняет итерацию по массиву или повторяемому объекту
v-on слушать события DOM
v-bind реактивно обновить атрибут HTML
v-model устанавливает двустороннюю привязку для входных данных формы. используется в элементах формы, обновляет модель, когда пользователь изменяет значение поля формы
v-once применяет свойство только один раз и никогда не обновляет его, даже если переданные данные изменяются

v-bindиv-onиметь сокращенный формат:

<a v-bind:href="url">...</a>
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

Примерv-if/v-else/v-else-if:

<div v-if="type === 'A'">
  it's A
</div>
<div v-else-if="type === 'B'">
  it's B
</div>
<div v-else-if="type === 'C'">
  it's C
</div>
<div v-else>
  it's neither one
</div>

Условные

Вы можете встроить условное выражение в выражение, используя тернарный оператор:

{{ isTrue ? 'yes' : 'no' }}

Работа с элементами формы

Чтобы модель обновлялась, когда происходит событие изменения, а не каждый раз, когда пользователь нажимает клавишу, вы можете использоватьv-model.lazyвместо простоv.model.

Работа с полями ввода,v-model.trimполезно, потому что автоматически удаляет пробелы.

И если вы принимаете число вместо строки, убедитесь, что вы используетеv-model.number.

Изменение событий

я используюclickв качестве примера, но относится ко всем возможным событиям

  • v-on:click.nativeзапускать собственное событие DOM вместо события Vue
  • v-on:click.stopостановить распространение события клика
  • v-on:click.passiveиспользуетпассивная опция addEventListener
  • v-on:click.captureиспользовать захват событий вместо всплытия событий
  • v-on:click.selfубедитесь, что событие щелчка не произошло из дочернего события, а произошло непосредственно с этим элементом
  • v-on:click.onceсобытие будет срабатывать только один раз
  • v-on:submit.prevent: вызовevent.preventDefault()при инициированном событии отправки, используется, чтобы избежать отправки формы для перезагрузки страницы

Для получения дополнительной информации о распространении, пузырчатой / захватывающей информации см. МойРуководство по событиям JavaScript.

Модификаторы событий мыши

  • v-on:click .leftсрабатывает только при нажатии левой кнопки мыши
  • v-on:click .rightсрабатывает только по щелчку правой кнопкой мыши
  • v-on:click .middleсрабатывает только при нажатии средней кнопки мыши

Отправлять событие, только если нажата определенная клавиша

  • v-on:keyup.enter
  • v-on:keyup.tab
  • v-on:keyup.delete
  • v-on:keyup.esc
  • v-on:keyup.up
  • v-on:keyup.down
  • v-on:keyup.left
  • v-on:keyup.right

Модификаторы событий клавиатуры

Запускать событие только в том случае, если также нажата определенная клавиша клавиатуры:

  • .ctrl
  • .alt
  • .shift
  • .meta(cmd на Mac, клавиша Windows на Win)

v-привязка

  • v-bind .propпривязать опору вместо атрибута
  • v-bind .camelиспользуйте camelCase для имени атрибута
  • v-bind .syncсинтаксический сахар, который превращается вv-onобработчик обновления привязанного значения. Видетьэто.

Крючки жизненного цикла

  • beforeCreateвызывается до создания приложения
  • createdвызывается после создания приложения
  • beforeMountвызывается до того, как приложение будет установлено в DOM
  • mountedвызывается после того, как приложение установлено в DOM
  • beforeDestroyвызывается до того, как приложение будет уничтожено
  • destroyedвызывается после уничтожения приложения
  • beforeUpdateвызывается перед обновлением свойства
  • updatedвызывается после обновления свойства
  • activatedвызывается, когда активируется поддерживаемый компонент
  • deactivatedвызывается при деактивации поддерживаемого компонента

Встроенные компоненты

Vue предоставляет 5 встроенных компонентов:

  • <component>
  • <transition>
  • <transition-group>
  • <keep-alive>
  • <slot>

Глобальная конфигурация объекта Vue

ВVue.configобъект имеет следующие свойства, которые вы можете изменить при создании экземпляра:

Свойство Описание
silent по умолчанию false, если true подавлять журналы и предупреждения
optionMergeStrategies позволяет определитьиндивидуальная стратегия слияниядля вариантов
devtools по умолчанию true при разработке и false при производстве. Вы можете переопределить эти значения.
errorHandler позволяет установить функцию обработчика ошибок. Полезно для подключения Sentry и других подобных сервисов
warnHandler позволяет установить функцию обработчика предупреждений, аналогичнуюerrorHandler, но для предупреждений вместо ошибок
ignoredElements используется, чтобы позволить Vue игнорировать пользовательские элементы, определенные вне его, напримерВеб-компоненты.
keyCodes позволяют вам определять пользовательские ключевые псевдонимы дляv-on
performance по умолчанию false. Если установлено значение true, отслеживает производительность компонентов Vue в браузере DevTools.
productionTip по умолчанию true. Установите значение false, чтобы отключить предупреждение «вы находитесь в режиме разработки» во время разработки в консоли.

Методы объекта Vue

Метод Описание
Vue.extend позволяет создать подкласс объекта Vue, чтобы создать собственный профиль
Vue.nextTick откладывает выполнение обратного вызова после следующего цикла обновления DOM
Vue.set добавить свойство к объекту
Vue.delete удалить свойство из объекта
Vue.directive установить (или получить) глобальную директиву
Vue.filter установить (или получить) глобальный фильтр
Vue.component установить (или получить) глобальный компонент
Vue.use установить плагин Vue.js
Vue.mixin установить глобальный миксин
Vue.compile скомпилировать строку шаблона в функцию рендеринга
Vue.version возвращает текущую установленную версию Vue

Параметры, переданные объекту Vue

При инициализации объекта Vue вы передаете объект:

const vm = new Vue({

})

Этот объект принимает ряд свойств.

Свойство Описание
data позволяет передавать набор реактивных данных, которые будут использоваться приложением Vue. Все реактивные свойства должны быть добавлены во время инициализации, вы не можете добавить новые позже.
props это набор атрибутов, которые предоставляются родительским компонентам в качестве входных данных.
propsData данные по умолчанию для реквизита. Полезно только во время тестирования
methods набор методов, определенных в экземпляре Vue
computed как методы, но кешируются внутри
watch позволяет просматривать свойства и вызывать функцию при их изменении

Пример определения данных, методов и вычисляемых свойств:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessageAsMethod: function () {
      return this.message.split('').reverse().join('')
    }
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reverseMessageAsMethod) // => ‘olleH’ vm.message = ‘Goodbye’ console.log(vm.reversedMessage) // => ‘eybdooG’

ДОМ

  • elустанавливает элемент DOM, на котором монтируется экземпляр. Это может быть селектор CSS или HTMLElement.
  • templateшаблон, представленный в виде строки, который заменит смонтированный элемент
  • renderв качестве альтернативы для определения шаблона вы можете определить шаблон с помощью функции рендеринга
  • renderErrorустановить альтернативный выход, когда функция, прикрепленная кrenderтерпит неудачу

Ресурсы экземпляра Vue

  • directivesнабор директив для связи с экземпляром Vue
  • filtersнабор фильтров для связи с экземпляром Vue
  • componentsнабор компонентов, которые нужно связать с экземпляром Vue

Параметры композиции Vue

  • parentуказывает родительский экземпляр
  • mixinsустанавливает массив объектов миксина
  • extendsрасширить другой компонент

Другие параметры объекта Vue

  • nameустановка имени для компонента позволяет вам вызывать его, что полезно при отладке или когда вам нужно рекурсивно добавить компонент в его шаблон
  • functionalесли true, устанавливает компонент без состояния (нетdata) и без экземпляров (нетthis), что делает его более легким
  • modelпозволяет настроить свойство, используемое в событиях, полезно, например, при взаимодействии с формами
  • commentsпо умолчанию false. Если установлено значение true, сохраняет HTML-комментарии, помещенные в шаблоны.

Свойства экземпляра

Учитывая экземпляр Vue, сохраненный в переменнойconst vm = new Vue(/*...*/), вы можете просматривать его и взаимодействовать с ним.

Свойства экземпляра Vue

  • vm.$dataобъект данных, связанный с экземпляром
  • vm.$propsреквизит, который получил экземпляр
  • vm.$elэлемент DOM, к которому привязан экземпляр
  • vm.$optionsобъект, используемый для создания экземпляра Vue
  • vm.$parentродительский экземпляр
  • vm.$rootкорневой экземпляр (если это корневой экземпляр, это указывает на себя)
  • vm.$childrenмассив дочерних экземпляров
  • vm.$slotsмассив связанных слотов, содержащихся в шаблоне
  • vm.$scopedSlotsмассив связанных слотов с заданной областью действия
  • vm.$refsобъект, содержащий свойство для каждого элемента, на который указываетrefатрибут, определенный в шаблоне
  • vm.$isServerистина, если экземпляр Vue запущен на сервере (полезно при рендеринге на стороне сервера)
  • vm.$attrsобъект атрибутов, которые предоставляются компоненту, но не определены как свойства
  • vm.$listenersобъектv-onпрослушиватели событий, назначенные компоненту

Данные о методах

  • vm.$watchнастроить наблюдатель для изменений свойств в данных Vue. Он также может следить за изменениями значений внутри объектов.
  • vm.$setустановить свойство
  • vm.$deleteудалить собственность

События

  • vm.$emitзапускает настраиваемое событие наvmЭкземпляр Vue
  • vm.$onпрослушивать настраиваемое событие наvmЭкземпляр Vue
  • vm.$onceподобно$on, но слушает только один раз
  • vm.$offудаляет прослушиватель событий из экземпляра Vue

Методы жизненного цикла

  • vm.$mountсмонтировать экземпляр Vue на элементе DOM, если он еще не смонтирован
  • vm.$forceUpdateзаставитьvmЭкземпляр Vue для повторного рендеринга. Не вызывает повторную визуализацию дочерних компонентов.
  • vm.$nextTickпринимает обратный вызов и планирует его для следующего цикла обновления DOM
  • vm.$destroyуничтожает приложение и удаляет все дочерние компоненты, наблюдателей и слушателей

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: