Фреймворк Vue.js

Vue (произносится как view – вью) – это прогрессивный фреймворк для создания пользовательских интерфейсов. Vue позволяет строить приложения с применением архитектурного паттерна MVVM (Model-View-ViewModel).

Особенность Vue.js в том, что его можно начинать с легкостью использовать в уже существующем приложении, внедряя постепенно и используя вместе с другими JavaScript библиотеками. Это очень отличная особенность, когда нужно переписать приложение постепенно, а не все сразу.

Создатель фрейморвка Vue.js – Эван Ю (Evan You), бывший сотрудник Google. Разработка фреймворка ведется Эваном вместе с сообществом разработчиков вне всяких компаний.

Релиз Vue состоялся в феврале 2014 года. Версия 1.0 была выпущена в октябре 2015 года, а версия 2.0 – в сентябре 2016.

Плюсы Vue.js

  1. достаточно быстрая разработка;
  2. небольшой вес фреймворка;
  3. хороша документация;
  4. большое сообщество разработчиков;
  5. быстрое взаимодействие с виртуальным DOM;
  6. подключение плагинов и создание своих плагинов;
  7. компонентная разработка приложения;
  8. реализует современные подходы к разработке;
  9. поддержка серверного рендинга приложения с помощью Nuxt.js.

Функции Vue.js:

  1. Реактивные интерфейсы;
  2. Декларативный рендеринг;
  3. Связывание данных;
  4. Директивы (все директивы имеют префикс «V-». В директиву передается значение состояния, а в качестве аргументов используются html атрибуты или Vue JS события);
  5. Логика шаблонов;
  6. Компоненты;
  7. Обработка событий;
  8. Свойства;
  9. Переходы и анимация CSS;
  10. Фильтры.

В этом фрейморвке используются идеи – реактивного программирования. Реактивное программирование – это когда разработка основана на потоках статических и динамических данных, а также распространении изменений благодаря потоку этих данных.

Vue подходит для небольших проектов, которым необходимо добавить немного реактивности, представить форму с помощью AJAX, отобразить значения при вводе данных пользователем, авторизация или другие аналогичные задачи.

Экземпляр

С создания экземпляра Vue начинается вся разработка. Экземпляр создается через функцию:

var vm = new Vue({
  // опции
})

Для экземпляра указывается объект с набором опций, используемых в приложении. Пример:

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data () {
    return {
      obj
    }
  }
})

Все компоненты Vue также являются экземплярами Vue и поэтому также принимают объект параметров.

Директивы

Директивы — специальные атрибуты для добавления элементам html дополнительной функциональности.

Некоторые встроенные директивы:

  1. V-bind — динамически связывается с одним или несколькими атрибутами;
  2. V-cloak — прячет “усатые” выражения, пока не подтянулись данные;
  3. v-if — условие для рендера элемента;
  4. V-else — обозначает “else блок” для v-if;
  5. V-for — циклично проходит массив объектов;
  6. V-model — связывает состояние с input элементом;
  7. V-on — связывает слушателя события с элементом;
  8. V-once — рендерит элемент только вначале и больше не следит за ним;
  9. V-pre — не компилирует элемент и его дочерние элементы;
  10. V-show — переключает видимость элемента, изменяя свойство CSS display;
  11. V-text — обновляет textContent элемента.

Компоненты

Компоненты – это разделение кода, его инкапсулирование, на независимые части позволяющие повторно использовать код. Компоненты образуют древовидную иерархию.

На этапе проектирования мы разбиваем наше приложение на независимые части и получаем древовидную структуру компонентов.


Фреймворк Vue.js

В Vue.js нет особых требований к именам компонентов, но хорошая практика — придерживаться правил W3C насчет кастомных компонентов, то есть буквы нижнего регистра и разделения через дефис.

Коммуникация между vue-компонентами осуществляется по принципу “Props in, Events out”. То есть от родительского элемента к дочернему информация передается через пропсы, а обратно — вызываются события.

Создание нового компонент в Vue:

// Определяем новый компонент под именем todo-item
Vue.component('todo-item', {
  template: '
  • Это одна задача в списке
  • ' }) var app = new Vue(...)
     
    Поделиться в facebook
    Facebook
    Поделиться в twitter
    Twitter
    Поделиться в vk
    VK
    Поделиться в google
    Google+
    Поделиться в email
    Email

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Группа в VK

    Помощь проекту

    Обнаружили опечатку?

    Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

    Свежие статьи

    Похожие статьи

    Фреймворки и библиотеки в JavaScript

    Фреймворки и библиотеки в JavaScript

    JavaScript — это мультипарадигмальный язык программирования, который поддерживает типы программирования, управляемые событиями, функциональные и обязательные (в том числе объектно-ориентированные и основанные на прототипах). Фреймворки JavaScript

     
    Знакомство с Ajax.

    Знакомство с Ajax.

    AJAX расшифровывается как «Асинхронный JavaScript и XML». Под AJAX понимается не одна технология, и она не является новой. На самом деле это группа технологий (HTML,

     
    Знакомство с jQuery

    Знакомство с jQuery

    jQuery — это библиотека JavaScript, в основу которой положено взаимодействие JavaScript и HTML. Она позволяет легко получить доступ к любому элементу DOM, с ее помощью

     
    Cookies в JavaScript.

    Cookies в JavaScript.

    Cookies – это небольшие фрагменты именованных данных, сохраняемые web-браузером и связанные с определенными web-страницами или web-сайтами. Cookies первоначально предназначались для разработки серверных сценариев и на

     

    Сообщить об опечатке

    Текст, который будет отправлен нашим редакторам: