vue tips and snippets

vue-tips

// директивы
v-if="expression"
v-else-if="expression"
v-else="expression"
v-show="expression" - если обновление выражения очень частое (более быстрый аналог v-if). не удаляет DOM элемент, а просто меняет css display 
v-for="item in dataitems" (желательно добавлять спец аттрибут :key="item.id" и иметь этот id в данных 
  либо использовать вариант v-for="(item, index) in dataitems" :key="index"), dataitems может быть целым числом
v-bind:attribute='dataitem' (или сокрашенно :attribute='dataitem') - связать атрибут html-тега и данные dataitem
v-bind:class="объект" или v-bind:class="{ имя_класса: логическое выражение[, 'имя_класса2': логическое выражение2]}" - установка класса с помощью объекта 
  вместо объекта можно указывать функцию, возвращающую объект
v-bind:class="[имя_класса[, имя_класса2]]" - установка класса с помощью массива, имя класса может вычисляться в выражении
v-on:event="expression" (сокращенная форма @event)
v-model="dataitem"
v-for и v-if могут использоваться вместе, но у v-for бОльший приоритет
v-model.number - привести к числу значение элемента формы
v-model.trim - обрезать пробелы в начале и в конце


// события
this.$emit('arbitrary-event-name')
$event - нативное событие DOM
модификаторы событий для v-on:
.stop событие не будет всплывать дальше
.prevent действия по-умолчанию для события больше не будет
.capture отслеживать события в режиме capture, т.е. событие, нацеленное на внутренний элемент
.self вызов обработчика только в случае наступления события непосредственно на данном элементе (то есть не на дочернем компоненте)
.once Событие сработает только 1 раз
.passive
модификаторы можно объединять в цепочки и использовать без указания метода-обработчика
<!-- вызвать `vm.submit()` только если `key` будет `Enter` -->
<input v-on:keyup.enter="submit">

Vue предоставляет псевдонимы для наиболее часто используемых клавиш, когда это необходимо для поддержки устаревших браузеров:
.enter
.tab
.delete (ловит как «Delete», так и «Backspace»)
.esc
.space
.up
.down
.left
.right

Можно использовать следующие модификаторы для отслеживания событий мыши или клавиатуры с зажатой клавишей-модификатором:
.ctrl
.alt
.shift
.meta

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

<!-- синхронизируется по событию "change", а не "input" -->
<input v-model.lazy="msg">

экземпляры Vue предоставляют и другие методы для интерфейса событий. Мы можем:
- Прослушивать событие с помощью $on(eventName, eventHandler)
- Прослушивать событие только один раз с помощью $once(eventName, eventHandler)
- Прекращать прослушивание события с помощью $off(eventName, eventHandler)


// фильтр вывода, который является функцией, задаваемой в настроечном обекте компонента
{{ поле | фильтр}}
Фильтры можно объединять в цепочки: {{ message | filterA | filterB }}
Фильтры являются JavaScript-функциями, и потому могут принимать параметры:{{ message | filterA('arg1', arg2) }}
В данном случае filterA определяется как функция с тремя аргументами. Значение message будет передано первым аргументом. Простая строка 'arg1' будет передана в filterA вторым аргументом, а значение выражения arg2 — третьим.

// подключение плагинов
import NameOfPluginObject from 'npm-plugin-name'
Vue.use(NameOfPluginObject)
Vue.use(Router);

// компоненты
Vue.component('name', {}); // глобальная регистрация компонента

const InnerComponent = {template: '', props: [] ...}
Vue.component('OuteComponent', components: {ic: InnerComponent}) // локальная регистрация InnerComponent

<!-- Компонент меняется при изменении currentTabComponent -->
<component v-bind:is="currentTabComponent"></component>
В примере выше currentTabComponent может содержать:
- имя зарегистрированного компонента, или
- объект с настройками компонента

this.$root - корневой элемент
this.$parent - родительский элемент
Несмотря на наличие входных параметров и событий, иногда вам может потребоваться прямой доступ к дочернему компоненту в JavaScript. Для этого вы можете назначить ссылочный ID дочернему компоненту с помощью атрибута ref. Например:
<base-input ref="usernameInput"></base-input>
Теперь в компоненте, где вы определили этот ref, вы можете использовать:
this.$refs.usernameInput

// хуки
запросы к API для инициализации данных лучше делать в created хуке

// имена
имена компонентов для DOM шаблонов в kebab-case, иначе в PascalCase
имена событий в kebab-case
имена файлов компонентов в PascalCase

//vuex
последовательность опций в объекте хранилища StateMutationsActionsGetters :
const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

Vuex требует соблюдения нескольких высокоуровневых принципов:
- Глобальное состояние приложения должно содержаться в глобальном хранилище;
- Единственным механизмом изменения этого состояния являются мутации, являющиеся синхронными транзакциями;
- Асинхронные операции инкапсулируются в действия или их комбинации.
commit - для вызова мутаций. мутации - сонхронны
dispatch - для вызова действий. действия могут быть асинхронными