Vue.js

Welcome to Vue.js.

Vue logo

Welcome to Vue.js

Немного о себе...

Popular JS frameworks:

but i meme

Немного об основных фичах

Why Vue.js?

Vue.js в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами.

Virtual DOM

Виртуальный DOM — это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM.

Virtual DOM

Virtual DOM image

Templates

            <template>
                <div id="app">
                      {{ message }}
                </div>
            </template>
        
            var app = new Vue({
                  el: '#app',
                  data: {
                      message: 'Привет, Vue!'
                  }
            })
        

Two way data binding

Oops...

joke image

Setup

Подход однофайловых компонентов

Vue component

Разделение ответственности

        <template>
            <div id="app">...</div>
        </template>
        <script src="./my-component.js"></script>>
        <style src="./my-component.css"><style>
    

Базовый синтаксис шаблонов

Директивы

Lifecycle Hooks

Lifecycle hooks

Вычисляемые свойства

При усложнение логики в шаблонах или при его повторном переиспользовании имеет смысл вынести эту логику в JS. Для этого используют вычисляемые свойства.

Обработка событий

Работа с классами и стилями

Часто возникает необходимость динамически изменять CSS-классы и inline-стили элементов в зависимости от состояния приложения. Поскольку и то и другое атрибуты, мы можем использовать v-bind: необходимо лишь вычислить итоговую строку при помощи выражения.

Условная отрисовка

Отслеживание изменений в массивах

Vue оборачивает у наблюдаемого массива методы внесения изменений, чтобы они вызывали обновления представления. Оборачиваются следующие методы:

Работа с формами

Можно использовать директиву v-model для двунаправленного связывания данных с элементами форм input, textarea и select. Способ обновления элемента выбирается автоматически в зависимости от типа элемента.

Пример

Таблица с возможностью добавления, обновления и удаления элементов (простой CRUD)

Компоненты

Vue components

Регистрация компонентов

Слоты

  1. Vue реализует API Shadow DOM - slot

Фильтры

Для распространённых задач форматирования текста во Vue используются фильтры. Они находят своё применение в двух местах: в mustache-интерполяциях и в выражениях v-bind.

Другие немаловажные фичи...

CSS

but i meme

Недостатки

Экосистема

В чем проблема SPA?

SSR

client side rendering server side rendering

SSR в экосистеме Vue

Полезные ссылки и либки

Questions

Vue love logo