Vue: Анимации, Валидации и Данные

Про меня

Front-end разработчик в YouWe

Испытываю страсть к UX

Разрабатываем POS-платформу используя Vue

2/60

Содержание

• Анимирование во Vue

• Валидации при помощи Vee Validate

• Работа со слоем данных

3/60

4/60

Live result

Анимации во Vue

<transition name=“transition name”

mode=“out-in”>

// контент будет анимирован

</transition>

Классы Анимации

\

Анимирование переходов

<transition name="fade"

mode="out-in”>

<router-view></router-view>

</transition>

9

10

Валидация email c Vee Validate

<input name=“email"

v-validate="'required|email'“ data-vv-delay=“400”

:class="{'is-danger': errors.has(‘email') }"

type=“email">

<span v-show="errors.has(‘email')" class="is-danger">

{{ errors.first(‘email') }}

</span>

11/60

Подтверждение пароля c Vee Validate

v-validate=“’confirmed:name-of-field-to-confirm’”

<input name=“password-confirmation”

type=“password”

v-validate=“’confirmed:password’”>

Будьте внимательны

v-validate="‘required|unique_username’”

Vuex

Когда следует использовать Vuex?

• Не стоит использовать Vuex

REST Store Component

Когда следует использовать Vuex?

• Используйте Vuex

REST Store

Component

Component

Когда следует использовать Vuex?

• Используйте Vuex

API

Store Component

WS

Что мы получили от Vuex?

• Реактивное состояние приложения

• Модульность состояния

• Дебаггинг мутирования состояния

Проблемы использования Vuex?

20/22

• Vuex маппит все геттеры на root state.

• Большое количество плагинов для Vuex, но много еще сырых решений

• Hot reloading Webpack необходимо настраивать вручную

21

Контакты

Виталий Ратушный

Email: v.ratyshnij@gmail.com

SkypeId: misreadable

Русскоязычное сообщество Vue telegram-chat: @vuejs_ru