Уже все знают о React и Angular, но что мы знаем о Vue.js? Андрей Стягайло рассказывает не только о Vue.js, но и о том что такое Nuxt.js и почему на него стоит обратить внимание в 2019 году.

1. All you need is Vue ,
Андрей Стягайло
Nuxt is all you need

2. Андрей Стягайло
●
~2 года в комерческой разработке
●
1+ года работы с Vue.js и Nuxt.js в продакшене
●
Работаю Front-End Developer в KeepSolid

3. Easy to Learn, Hard to Master
1/30

4. Vue.js
Что такое Vue.js?
● Vue — это прогрессивный фреймворк для создания
пользовательских интерфейсов.
● Ядро Vue в первую очередь решает задачи уровня
представления (view)
● Vue не является фреймворком-монолитом, он
создавался пригодным для постепенного внедрения
● Архитектура фреймворка во многом вдохновлена
паттерном MVVM, хоть и не реализует его в полной мере.
2/30

5. Однофайловые
компоненты:
3/30
<template>
<p>{{ greeting }} World!</p>
</template>
./Hello.vue
<script>
module.exports = {
data: function () {
return {
greeting: 'Hello'
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
● Написание представления в виде
html разметки
● Модульный CSS
● Использование HTML/СSS
препроцессоров
● Весь код
разметки/стилей/скриптов
относящийся к компоненте
структурирован и находится в
одном файле
Приемущества:

6. Данные (data):
4/30
● Cвойства в data будут реактивными,
только если они существовали при
создании экземпляра.
● Когда экземпляр Vue создан, он
добавляет все свойства, найденные в
опции data , в систему реактивности
Vue.
● Представление будет «реагировать»
на их изменения, обновляясь в
соответствии с новыми значениями.
//<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
<!-- template -->
<div id="app">
{{ message }} <!-- Hello World -->
</div>
//<script>
…
this.message = 'ololo'
...
<!-- template -->
<div id="app">
{{ message }} <!-- ololo -->
</div>
//<script>
…
this.todo = '1'
...
<!-- template -->
<div id="app">
{{ todo }} <!-- undefned -->
</div>
Профит:
Компромисы:

7. Директивы:
5/30
<!-- связывание атрибута -->
<img v-bind:src="imageSrc">
<!-- динамическое имя атрибута (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- связывание CSS-класса -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
● V-bind: Динамически связывает атрибуты тега
или входной параметр компонента с
выражением.
● При использовании с атрибутами class и style
поддерживает массивы и объекты в качестве
значений.
● V-if: Осуществляет отрисовку элемента, только
если передаваемое выражение истинно.
● V-show: Переключает CSS-свойство display
элемента, в зависимости от того, истинно ли
указанное выражение.
<!-- будет отрисовано если isShow == true -->
<h1 v-if="isShow">Да</h1>
<!-- иначе будет отрисован этот заголовок -->
<h1 v-else>Нет</h1>
<!-- останется в DOM и при isShow == false -->
<h1 v-show="isShow">Шоу</h1>
v-bind:
v-if / v-show:

8. Обработчики событий:
6/30
<!-- обработчик метода -->
<button v-on:click="doThis"></button>
<!-- динамическое имя события (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- inline-выражение -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- сокращённая запись -->
<button @click="doThis"></button>
<!-- модификатор stop propagation -->
<button @click.stop="doThis"></button>
<!-- модификатор prevent default -->
<button @click.prevent="doThis"></button>
● Тип события указывается в параметре.
● Выражение может быть именем метода,
inline-выражением
● Выражение может отсутствовать, если
указан один или несколько модификаторов.
● У обычного элемента можно подписаться
только на нативные события DOM, у
элемента компонента - на пользовательские
события
v-on:
● .stop — вызовет event.stopPropagation() .
● .prevent — вызовет event.preventDefault() .
Модификаторы:

9. Работа с формами (v-model):
7/30
<input v-model="message" placeholder="введите
текст">
<textarea v-model="message" placeholder="введите
несколько строчек"></textarea>
<input type="checkbox" id="checkbox" v-
model="checked">
<label for="checkbox">{{ checked }}</label>
<input type="radio" id="one" value="Один" v-
model="picked">
<label for="one">Один</label>
● Двунаправленнее связывание данных с
элементами форм input, textarea и select.
● Способ обновления элемента выбирается
автоматически в зависимости от типа
элемента
● v-model игнорирует начальное значение
атрибутов value , checked или selected .
● Начальное значение необходимо объявить
опции data компонента.
● В языках, требующих IME (китайский,
японский, корейский и т.д.), v-model не
обновляется по мере IME-композиции.
Плюсы:
Минусы:

10. Вычисляемые свойства:
8/30
…
data: {
message: 'Привет'
},
computed: {
// геттер вычисляемого значения
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
...
…
<p>«{{ message }}»</p> <!-- Привет -->
...
…
<p>«{{ reversedMessage }}»</p> <!-- тевирП -->
...
● Написанная функция будет
использоваться как геттер свойства
данной компоненты
● Вычисляемые свойства кешируются,
основываясь на своих зависимостях
● Вычисляемое свойство
пересчитывается лишь тогда, когда
изменится одна из его зависимостей
Профит:

11. Входные параметры:
9/30
…
props: ['postTitle']
...
…
<blog-post post-title="hello!"></blog-post>
<!-- передача JavaScript выражений. -->
<blog-post v-bind:post-title="message"></blog-post>
...
./parent-component.vue <template> ./child-component.vue <script>./parent-component.vue <template>./parent-component.vue <template>
…
props: {
postTitle: String
}
...

12. 10/30
3.0
Vue3 is Coming...

13. 11/30
Нельзя просто так взять и расказать про Nuxt
не затронув экосистему Vue

14. Экосистема Vue.js
12/30
Vuex
Vue
Router
Vue SSR
Vue

15. Vue Router:
● Глубокая интеграция с Vue.js
● Вложенные маршруты/представления
● Модульная конфигурация маршрутизатора
● Доступ к параметрам маршрута, query, wildcards
● Анимация переходов представлений на основе
Vue.js
● Удобный контроль навигации
13/30
Преимущества:

16. ● Лучшее SEO
● Лучшие показатели времени до
отображения контента
14/30
Преимущества:
● Ограничения при разработке
● некоторые внешние библиотеки могут
нуждаться в особой обработке
● Более сложные требования по настройке и
развёртыванию сборки
● Повышенная нагрузка на стороне сервера
Компромисы:
Server Side Rendering:

17. 15/30
Однонаправленный
поток данных и его
недостатки:
● Несколько представлений могут
зависеть от одной и той же части
состояния приложения.
● Действия из разных представлений
могут оказывать влияние на одни и те
же части состояния приложения.
Проблемы:

18. 16/30
И что же с этим
делать?:
● вынести всё общее состояние
приложения из компонентов и
управлять им в глобальном синглтоне
Решение:
● Дерево компонентов становится
одним большим «представлением» и
любой компонент может получить
доступ к состоянию приложения
● Можно вызывать действия для
изменения состояния, независимо от
того, где они находятся в дереве
Профит:

19. ● Привнесения новых концепций и вспомогательного
кода.
● Кратковременная продуктивность страдает на благо
долгосрочной.
17/30
● Централизованное хранилище данных для всех
компонентов приложения
● Состояние может быть изменено только
предсказуемым образом.
Vuex:
Плюсы:
Минусы:

20. This is Nuxt 18/30

21. Немного о Nuxt.js:
● Написание Vue-файлов
● Серверный рендеринг
● Мощная система маршрутизации с
асинхронными данными
● Обслуживание статических файлов
● Транспиляция ES6/ES7
● Сборка и минимизация JS & CSS
● Управление элементами в блоке head
● Горячая замена модулей при разработке
● Пре-процессоры: SASS, LESS, Stylus, и др.
19/30
Возможности:

22. 20/30
Rendering modes:
Server Side Rendered
Single Page App
Statically Generated

23. Как это работает?:
● assets
● components
● layouts
● middleware
● pages
● plugins
● static
● store
● nuxt.confg.js
21/30
Структура папок:

24. Страницы:
22/30
● data
● fetch
● layout
● transition
● scrollToTop
● validate
● middleware
Специальные атрибуты:
<template lang="pug">
h1.red Hello {{ name }}!
</template>
<script lang="coffee">
module.exports = data: ->
{ name: 'World' }
</script>
<style lang="sass">
.red
color: red
</style>
./pages/random-page-name.vue

25. Vue router in Nuxt:
23/30
router: {
routes: [
{
path: '/users',
component: 'pages/users.vue',
children: [
{
path: ':id?',
component: 'pages/users/_id.vue',
name: 'users-id'
}
]
}
]
}
pages/
--| users/
-----| _id.vue
--| users.vue
Древо файлов: Итоговый роутинг:

26. Асинхронные данные:
24/30
export default {
async asyncData ({ params }) {
let { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
}
export default {
asyncData ({ params }) {
return axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
return { title: res.data.title }
})
}
}
Возвращая Promise:
Используя async/await:

27. Хранилище Vuex:
25/30
export const state = () => ({
list: []
})
export const mutations = {
add (state, text) {
state.list.push({
text: text,
done: false
})
},
toggle (state, todo) {
todo.done = !todo.done
}
}
./store/todos.js
export default {
fetch ({ store, params }) {
return axios.get('http://my-api/stars')
.then((res) => {
store.commit('setStars', res.data)
})
}
}
The fetch Method:

28. Middleware:
26/30

29. Middleware:
27/30
<template>
<h1>Secret page</h1>
</template>
<script>
export default {
middleware: 'authenticated'
}
</script>
export default function ({ store, redirect }) {
// If the user is not authenticated
if (!store.state.authenticated) {
return redirect('/login')
}
}
middleware/authenticated.js: pages/secret.vue:

30. Server Middleware:
28/30

31. Server Middleware:
29/30
export default function (req, res, next) {
// write here your code...
console.log(req.path)
next()
}
export default {
serverMiddleware: [
'~/api/logger'
]
}
nuxt.confg.js: ./api/logger.js:

32. Статика и плагины:
30/30
module.exports = {
build: {
vendor: ['vue-notifcations']
},
plugins: ['~plugins/vue-notifcations']
}
Использование плагинов:
<template>
<img src="~assets/image.png">
</template>
Статические и файлы исходного кода:
...
<!-- Статическое изображение из папки `static`-->
<img src="/my-image.png"/>
...

33. Итоги:
● Интуитивно понятный
● Мощный инструмент для разработки
● Высокий уровень абстракции
● Обширная экосистема, решающая
большую чать проблем
Плюсы:
● Большой и сложный
● Зациклен на собственной экосистеме
Минусы:

34. Андрей Стягайло
Website:
Coming soon...
Facebook:
https://www.facebook.com/AndriiStiahailo
Email:
a.stiahailo@keepsolid.com