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

• Директивы
  • Условные
• Работа с элементами формы
• Изменение событий
• Модификаторы событий мыши
• Отправлять событие, только если нажата определенная клавиша
• Модификаторы событий клавиатуры
• Крючки жизненного цикла
• Встроенные компоненты
• Глобальная конфигурация объекта Vue
• Методы объекта Vue
• Параметры, переданные объекту Vue
  • ДОМ
  • Ресурсы экземпляра Vue
  • Параметры композиции Vue
  • Другие параметры объекта Vue
• Свойства экземпляра
  • Свойства экземпляра Vue
  • Данные о методах
  • События
  • Методы жизненного цикла

Директивы

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

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объект имеет следующие свойства, которые вы можете изменить при создании экземпляра:

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

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

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

const vm = new Vue({
})

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

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

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.js
• Интерфейс командной строки Vue.js: узнайте, как его использовать
• Инструменты разработчика Vue.js
• Настройка VS Code для разработки Vue
• Создайте свое первое приложение с Vue.js
• Однофайловые компоненты Vue.js
• Шаблоны и интерполяции Vue.js
• Директивы Vue.js
• Методы Vue.js
• Вычисляемые свойства Vue.js
• Стилизация компонентов Vue.js с помощью CSS
• Наблюдатели Vue.js
• Методы Vue против наблюдателей против вычисляемых свойств
• Фильтры Vue.js
• Компоненты Vue.js
• Слоты Vue.js
• Свойства компонента Vue.js
• События Vue.js
• Связь компонентов Vue.js
• Vuex, государственный менеджер Vue.js
• Vue, используйте компонент внутри другого компонента
• Vue, как использовать опору в качестве имени класса
• Как использовать SCSS с однофайловыми компонентами Vue.js
• Использование Tailwind с Vue.js
• Маршрутизатор Vue
• Динамически отображать компонент Vue
• Шпаргалка по Vue.js
• Храните данные Vue в localStorage с помощью Vuex
• Как динамически применять класс с помощью Vue
• Vue, как использовать v-модель
• Vue, почему данные должны быть функцией
• Roadmap to become a Vue.js developer in 2020