Виталий Ратушный "vue: animations, validations, data"
TRANSCRIPT
![Page 1: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/1.jpg)
Vue: Анимации, Валидации и Данные
![Page 2: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/2.jpg)
Про меня
Front-end разработчик в YouWe
Испытываю страсть к UX
Разрабатываем POS-платформу используя Vue
2/60
![Page 3: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/3.jpg)
Содержание
• Анимирование во Vue
• Валидации при помощи Vee Validate
• Работа со слоем данных
3/60
![Page 4: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/4.jpg)
4/60
![Page 5: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/5.jpg)
Live result
![Page 6: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/6.jpg)
Анимации во Vue
<transition name=“transition name”
mode=“out-in”>
// контент будет анимирован
</transition>
![Page 7: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/7.jpg)
Классы Анимации
\
![Page 8: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/8.jpg)
Анимирование переходов
<transition name="fade"
mode="out-in”>
<router-view></router-view>
</transition>
![Page 9: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/9.jpg)
9
![Page 10: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/10.jpg)
10
![Page 11: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/11.jpg)
Валидация 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
![Page 12: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/12.jpg)
Подтверждение пароля c Vee Validate
v-validate=“’confirmed:name-of-field-to-confirm’”
<input name=“password-confirmation”
type=“password”
v-validate=“’confirmed:password’”>
![Page 13: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/13.jpg)
Будьте внимательны
v-validate="‘required|unique_username’”
![Page 14: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/14.jpg)
![Page 15: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/15.jpg)
Vuex
![Page 16: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/16.jpg)
Когда следует использовать Vuex?
• Не стоит использовать Vuex
REST Store Component
![Page 17: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/17.jpg)
Когда следует использовать Vuex?
• Используйте Vuex
REST Store
Component
Component
![Page 18: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/18.jpg)
Когда следует использовать Vuex?
• Используйте Vuex
API
Store Component
WS
![Page 19: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/19.jpg)
Что мы получили от Vuex?
• Реактивное состояние приложения
• Модульность состояния
• Дебаггинг мутирования состояния
![Page 20: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/20.jpg)
Проблемы использования Vuex?
20/22
• Vuex маппит все геттеры на root state.
• Большое количество плагинов для Vuex, но много еще сырых решений
• Hot reloading Webpack необходимо настраивать вручную
![Page 21: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/21.jpg)
21
![Page 22: Виталий Ратушный "Vue: Animations, Validations, Data"](https://reader034.vdocuments.net/reader034/viewer/2022051404/5a64fdee7f8b9a2e118b472f/html5/thumbnails/22.jpg)
Контакты
Виталий Ратушный
Email: [email protected]
SkypeId: misreadable
Русскоязычное сообщество Vue telegram-chat: @vuejs_ru