обработка данных

Нажмите сюда, если долго загружается,
либо "ESC" - отмена
 
Заказ обратного звонка
Заказать звонок
Наш специалист свяжется с Вами и ответит на все вопросы
Обработка данных
Наш специалист свяжется с Вами и ответит на все вопросы.
OK

Vue.js для сомневающихся. Все, что нужно знать

Источник: https://habrahabr.ru
Время чтения: ~10 мин
Vue.js для сомневающихся. Все, что нужно знать
Статьи
876
Изображение носит иллюстрационный характер. Источник: habrahabr.ru
В данной статье речь пойдет о замечательном фронтенд фреймворке Vue.js. Как вы видите, статья называется «Vue.js для сомневающихся», и, если вы до сих пор не могли решиться попробовать Vue.js на практике, то надеюсь, что после прочтения вы все-таки на это решитесь.

Фреймворки разрабатываются для того, чтобы упростить нам жизнь и освободить от написания однотипного кода. Но, по мере того как кодовая база некоторых фреймворков сильно разрастается, они начинают привносить свою долю сложности в проект. Из-за этого при планировании разработки мы должны учитывать два фактора:

1) сложность нашего приложения
2) сложность фреймворка, который мы используем

Немного абстрагируемся и назовём это внутренней сложностью (то есть сложностью, от которой мы не можем избавиться при разработке) и сложностью инструмента, с помощью которого мы достигаем той или иной цели. Естественно манипулировать мы можем только сложностью инструмента.

Из вышесказанного, у нас получается два варианта выбора инструмента:

1) Вариант недостаточности. Когда инструмента недостаточно, чтобы перекрыть внутреннюю сложность. Функции, необходимые для реализации приложения, отсутствуют в фреймворке, и нам приходится вручную дорабатывать и добавлять необходимый инструментарий.
2) Вариант избыточности. Когда необходимый для приложения функционал перекрывается только небольшой частью инструмента. Остальная же часть инструментария висит мертвым грузом и только создает нам проблемы: ограничения при разработке, замедление загрузки приложения и т.п.

Так что же делать? Возможно, буду немного Капитаном Очевидностью, но надо действовать по принципу: “Для каждой цели — свой инструмент”. При планировании нам необходимо искать золотую середину так, чтобы сложность (и, следовательно, функциональность) приложения были на одном уровне.
О Vue.js и авторе
Итак, разберемся с Vue и каким образом он может облегчить нам разработку приложения.

Создателем Vue.js является Evan You, бывший сотрудник Google и Meteor Dev Group. Начал он разрабатывать фреймворк в 2013-м, а в феврале 2014-го состоялся первый публичный релиз. Vue широко используется среди китайских компаний, например: Alibaba, Baidu, Xiaomi, Sina Weibo и др. Он входит в ядро Laravel и PageKit. Недавно свободная система управления репозиториями GitLab тоже перешла на Vue.js.

В конце сентября 2016-го вышел в релиз Vue.js 2.0, еще круче и с упором на производительность — теперь используется виртуальный DOM, поддерживается серверный рендеринг, возможность использовать JSX и т.д. Хотя сейчас он поддерживается только сообществом, он держится достойно даже на уровне продуктов таких гигантов, как Google и Facebook (Angular2 и React 15), и постепенно догоняет их по популярности.

Рассмотрим самый простой пример:

app.js
CODE
- создается новый инстанс вью через new Vue;
- в el мы определяем, за каким элементом следит вью;
- в data у нас объект состояния;

app.html
CODE
- в html, естественно, у нас должен быть элемент с нужным нам селектором;
- данные из состояния выводим в усатом (mustache ведь) синтаксисе. Тут у нас обычное тернарное выражение;
- инпут связываем со значением message объекта состояния с помощью директивы v-model;
CODE
Концепции Vue.js
Основными концепциями Vue являются:
- конструктор;
- компоненты;
- директивы;
- переходы.

В первой версии еще были фильтры, но, насколько я знаю, в текущей версии они считаются deprecated.
Конструктор
app.js
CODE
Работа с Vue.js начинается с создания нового инстанса new Vue. В el у нас элемент, за которым следит Vue. В template выбран (либо прописан инлайново) элемент, куда Vue будет рендерить. В data хранится текущее состояние инстанса, а метод computed предоставляет нам вычисляемые свойства.

В примере вычисляемое свойство full_name отслеживает first_name и last_name как зависимости и автоматически синхронизируется.

В methods можно выделить следующие кастомные методы и методы жизненного цикла Vue:

- beforeCreate — смотрит данные и инициализирует события;
- created — смотрит, есть ли el или template. Если есть, то рендерит в них; если нет, то ищет метод render;
- beforeMount — создает vm.$el и заменяет им el;
- mounted — элемент отрендерен.

При изменении состояния:

- beforeUpdate — снова рендерит VDOM и сравнивает с реальным DOM-ом, применяет изменения;
- updated — изменения отрендерены;
- beforeDestroy — полный демонтаж вотчеров, внутренних компонентов и слушателей событий;
- destroyed — вызывается, когда выполнение операции останавливается.
Vue.js для сомневающихся. Все, что нужно знать
Источник: habrahabr.ru
Директивы
Директивы — специальные атрибуты для добавления элементам html дополнительной функциональности.

Рассмотрим некоторые встроенные директивы (кто работал с Angular, тому они покажутся очень знакомыми):

V-bind — динамически связывается с одним или несколькими атрибутами.
V-cloak — прячет “усатые” выражения, пока не подтянулись данные
v-if — условие для рендера элемента
V-else — обозначает “else блок” для v-if
V-for — циклично проходит массив объектов
V-model — связывает состояние с input элементом
V-on — связывает слушателя события с элементом
V-once — рендерит элемент только вначале и больше не следит за ним
V-pre — не компилирует элемент и его дочерние элементы
V-show — переключает видимость элемента, изменяя свойство CSS display
V-text — обновляет textContent элементаВсе Vue-директивы имеют префикс “v-”. В директиву передается какое-то значение состояния, а в качестве аргументов могут быть атрибуты html или события.

html
CODE
js
CODE
Компоненты
Компоненты помогают расширить основные html элементы и внедрить переиспользуемый код. По сути, компоненты — повторно используемые части UI. На этапе проектирования мы разбиваем наше приложение на независимые части и получаем древовидную структуру компонентов.
Vue.js для сомневающихся. Все, что нужно знать
Источник: habrahabr.ru
В Vue.js нет особых требований к именам компонентов, но хорошая практика — придерживаться правил W3C насчет кастомных компонентов, то есть буквы нижнего регистра и разделения через дефис.

app.js
CODE
Новый компонент объявляется с помощью Vue.component, и в первый аргумент мы передаем имя нового тега (в нашем случае simple-counter)
CODE
Коммуникация между vue-компонентами осуществляется по принципу “Props in, Events out”. То есть от родительского элемента к дочернему информация передается через пропсы, а обратно — вызываются события.
Vue.js для сомневающихся. Все, что нужно знать
Источник: habrahabr.ru
Также во Vue.js есть так называемые однофайловые компоненты. Мы создаем файл с расширением .vue и пишем туда стили, шаблон и логику. Причем писать можно на любом удобном вам препроцессоре (SASS, Stylus, PostCSS, Jade, ...) и языке, компилирующимся в JS (CoffeeScript, TypeScript).

app.js
CODE
Переходы
Vue предоставляет различные способы применения анимационных эффектов, когда элементы отрисованы, обновлены или удалены из DOM. Они включают в себя инструменты для:

- автоматического применения классов для CSS-переходов и анимаций;
- интеграции сторонних библиотек для CSS-анимаций, таких как Animate.css;
- использования JavaScript для манипуляции DOM-ом;
- интеграции сторонних JavaScript библиотек для анимаций, таких как Velocity.js.

Рассмотрим простой пример:

html
CODE
js
CODE
CODE
Экосистема фреймворка
Роутинг
Во Vue.js за маршрутизацию отвечает отдельный пакет vue-router. Он поддерживает вложенные маршруты к вложенным компонентам, предлагает упрощенное API для навигационных хуков, управляемое поведение скрола и продвинутый контроль переходов.

Вот небольшой пример:

app.js
CODE
app.vue
CODE
Ajax-запросы
Для работы с Ajax-запросами существует плагин vue-resource. Он предоставляет возможности для создания веб-запросов и обработки ответов с помощью XMLHttpRequest или JSONP. Также особенностью плагина является поддержка Promise API и URI шаблонов.

Пример:

js
CODE
Управление состоянием
Vuex — паттерн и библиотека управления состоянием для приложений на Vue.js. Он предоставляет централизованное общее состояние для всех компонентов в приложении и правила, обеспечивающие предсказуемое изменение состояния.

На изображении ниже представлено приложение на Vue+Vuex со следующими частями:

- Состояние (State), которое является единственным источником данных для компонентов.
- Vue-компоненты(Vue-components), которые по сути являются лишь декларативным отображением состояния.
- Действия (Actions), которые отлавливают событие, которое произошло, собирают данные с внешних API и запускают нужные мутации.
- Мутации (Mutations) — единственная часть, которая может изменять состояние и, получив данные от Actions, применяет их на состоянии.
Vue.js для сомневающихся. Все, что нужно знать
Источник: habrahabr.ru
Система сборки и инструменты разработчика
Для отладки в браузере существует Vue-devtools (к сожалению, пока только для Chrome), который позволяет видеть, какие компоненты есть в нашем приложении и их текущее состояние.
Vue.js для сомневающихся. Все, что нужно знать
Источник: habrahabr.ru
Также он прекрасно работает с Vuex и позволяет выполнять так называемый time-travel debugging: в браузере мы можем увидеть историю состояний и переключаться между ними.
Почему я должен его использовать
Vue удивителен! Я считаю, это здорово, что я могу просто подключить его на странице и начать работать без необходимости шаманить с системой сборки или CLI. С ним очень просто начать работать, даже если вы никогда не работали с JavaScript фреймворками. Это идеальное сочетание удобства и мощности. Рассмотрим еще несколько аргументов в его пользу:

- Теперь он еще меньше. Runtime сборка Vue.js 2.0 весит всего лишь 16kb, а вместе с vue-router и vuex — 26kb (примерно как и ядро первой версии).
Vue.js для сомневающихся. Все, что нужно знать
Источник: habrahabr.ru
- Он еще быстрее. Во Vue.js всегда уделялось большое внимание быстродействию. Прослойка, отвечающая за рендеринг, переписана на облегченную реализацию виртуального DOM-а — форка Snabbdom.
Vue.js для сомневающихся. Все, что нужно знать
Источник: habrahabr.ru
- Vue 2.0 поддерживает серверный рендеринг. Для этого есть модуль Vue-server-renderer, поддерживающий другие инструменты из экосистемы Vue (vue-router и vuex). Теперь гораздо проще создавать изоморфные приложения.
- Ребята из Alibaba работают над Weex, кроссплатформенным нативным мобильным UI (как ReactNative и NativeScript). Отныне Vue-компоненты можно будет использовать для веб, Android и iOS.
Vue прошёл путь от небольшого аматорского проекта до широко используемого проекта с большим сообществом, а я надеюсь, что сумел развеять ваши сомнения по поводу того, стоит использовать этот фреймворк или нет.
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Подписка на новости. Получайте важное первым
ПОДПИСАТЬСЯ