Vue что это простыми словами
Обзор Vue.js
Vue.js или просто Vue – это прогрессивный JavaScript-фреймворк, который используется для создания пользовательских интерфейсов.
Что такое фреймворк
Фреймворк (framework) можно рассматривать как некий каркас для создания приложений на определенном языке программирования. Он включает в себя набор библиотек, которые позволяют значительно упростить и убыстрить разработку приложений. Также цель фреймворка – это предоставление такой среды разработки, которая позволит дорабатывать и расширять функционал проекта.
Наглядно отличие фреймворка от библиотеки можно объяснить вот так: 
Фреймворк использует определенную архитектуру приложения для того, чтобы проект был разделен на логические части, модули. Например, схема разделения Model-View-Controller (MVC) подразумевает разделение на три сегмента: модель, представление и контроллер, каждый из которых можно изменять независимо от других.
Если говорить более упрощенно, то существует множество типовых задач, которые приходится решать разработчикам – и поэтому часто используются библиотеки. Использование фреймворка позволяет избежать отдельного «складирования» полезного материала где-нибудь в отдельной папке либо постоянного написания однотипного кода: фреймворк позволяет использовать встроенные классы для валидации, логирования и многих других процессов, а также имеет структуру, которую в итоге получает проект.
Фреймворки имеют массу преимуществ, именно поэтому они используются практически повсеместно. Это:
Но у использования фреймворка есть и недостатки (и забывать о них не стоит):
История создания Vue.js
Работа над фреймворком Vue.js началась в 2013 году сотрудником Google Эваном Ю (Evan You). Используя AngularJS в работе над несколькими проектами, Эван решил, что можно взять часть этого фреймворка и создать что-то более легкое и простое в использовании.
На данный момент актуальной версией является 2.5.13, которая вышла 19 декабря 2017 года.
Что такое Vue.js
Название фреймворка созвучно с view, то есть с представлением (если говорить о модели MVC).
Также Vue.js можно использовать для создания одностраничных приложений.
Центральная концепция Vue.js – это концепция компонентов, то есть небольших частей интерфейса пользователя, которые можно использовать повторно. Таким образом, и само приложение состоит из частей-компонентов. Один компонент может включать несколько других компонентов, то есть используется древовидная иерархия: 
Vue.js – это реактивный MVC фреймворк: представление (view) автоматически изменяется при изменении переменной (модели).
Сравнение с другими фреймворками
Если кратко, то Vue похож на React, например, в том, что оба фреймворка используют Virtual DOM и фокусируются на корневой библиотеке; это фреймворки с высокой производительностью и они оба предоставляют хорошие решения для масштабирования. Но отличия, естественно, тоже присутствуют: React имеет более обширную, но и более фрагментированную экосистему, в то время как Vue поддерживает все дополнительные библиотеки в актуальном соответствии с ядром библиотеки.
Что касается AngularJS, то он также значительно повлиял на Vue, однако, в отличие от него, Vue значительно более прост в изучении, а также является более гибким и модульным решением, чем Angular, который придерживается жесткой структуры приложения. Если сравнивать производительность этих двух фреймворков, то Vue производительнее и более прост в оптимизации (хотя если сравнивать Vue.js с Angular 2, то оба фреймворка показывают примерно одинаковую производительность, Vue лишь слегка обгоняет Angular 2).
Почему стоит выбрать Vue.js
Vue реактивен, производителен и прост в освоении. Фреймворк не зависит от jQuery. Компоненты Vue легко использовать в уже существующем проекте.
И, конечно, не стоит забывать про лицензию MIT, которую имеет Vue.js – значит, фреймворк можно использовать где и когда угодно.
Более того, в том, как работать с ним, может быстро разобраться даже тот, кто никогда до этого не имел дела с JS-фреймворками.
Использование Vue.js
Фреймворк используется многими китайскими компаниями, в частности такими известными, как Alibaba, Baidu и Xiaomi. Связано это, скорее всего, с тем, что Эван Ю активно взаимодействует с китайским JavaScript-сообществом.
Введение
Что такое Vue.js?
Vue (произносится /vjuː/, примерно как view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его совместно с современными инструментами и дополнительными библиотеками.
Если вы хотите узнать больше о Vue перед тем как начать, мы создали видео с рассказом об основных принципах работы на примере проекта.
Если вы — опытный фронтенд-разработчик, и хотите узнать, чем Vue отличается от остальных библиотек или фреймворков, обратите внимание на сравнение с другими фреймворками.
Начало работы
В этом руководстве мы предполагаем, что вы уже знакомы с HTML, CSS и JavaScript на базовом уровне. Если же вы во фронтенд-разработке совсем новичок, начинать сразу с изучения фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.
Проще всего попробовать Vue.js, начав с примера Hello World. Откройте его в другой вкладке, и изменяйте по ходу чтения руководства. Можно и просто создать index.html файл на диске и подключить Vue:
Если предпочитаете что-то более интерактивное, можете пройти эту серию уроков на Scrimba, которая представляет собой сочетание скринкастов и песочницы для проверки примеров кода, где вы можете остановиться и продолжить изучение в любое время.
Декларативная отрисовка
В ядре Vue.js находится система, которая позволяет декларативно отображать данные в DOM с помощью простых шаблонов:
Вот мы и создали наше первое Vue-приложение! Выглядит как простая отрисовка шаблона, но «под капотом» Vue выполнил немало работы. Данные и DOM теперь реактивно связаны. Как это проверить? Просто откройте консоль JavaScript в браузере (прямо здесь, на этой странице) и задайте свойству app.message новое значение. Вы тут же увидите соответствующее изменение в браузере.
Обратите внимание, что теперь больше не нужно напрямую взаимодействовать с HTML. Приложение Vue присоединяется к одному элементу DOM ( #app в данном случае), а затем полностью контролирует его. HTML является нашей точкой входа, но всё остальное происходит внутри вновь созданного экземпляра Vue.
Кроме интерполяции текста, можно также связывать атрибуты элементов:
Условия и циклы
Управлять присутствием элемента в DOM тоже довольно просто:
Этот пример демонстрирует возможность связывать данные не только с текстом и атрибутами, но и со структурой DOM. Более того, Vue также имеет мощную систему анимации, которая автоматически применяет эффекты переходов, когда элементы добавляются/обновляются/удаляются.
Есть и другие директивы, каждая из которых имеет своё предназначение. Например, директива v-for для отображения списков, используя данные из массива:
Работа с пользовательским вводом
Чтобы пользователи могли взаимодействовать с вашим приложением, используйте директиву v-on для отслеживания событий, указав метод-обработчик:
Обратите внимание, в методе мы просто обновляем состояние приложения, не затрагивая DOM — всю работу с DOM выполняет Vue, а вы пишете код, который занимается только логикой приложения.
Разбиение приложения на компоненты
Важной концепцией Vue являются компоненты. Эта абстракция позволяет собирать большие приложения из маленьких «кусочков». Они представляют собой пригодные к повторному использованию объекты. Если подумать, почти любой интерфейс можно представить как дерево компонентов:
Во Vue компонент — это, по сути, экземпляр Vue с предустановленными опциями. Создать новый компонент во Vue просто:
Теперь его можно использовать в шаблоне другого компонента:
Пока что у нас получилось так, что во всех элементах списка будет один и тот же текст — это не очень-то интересно. Хотелось бы иметь возможность передавать данные от родительского в дочерние компоненты. Давайте изменим определение компонента, чтобы он мог принимать входной параметр:
Теперь можно передать текст задачи в каждый компонент с помощью v-bind :
В крупных приложениях разделение на компоненты становится обязательным условием для сохранения управляемости процесса разработки. Разговор о компонентах ещё далеко не окончен и мы вернёмся к ним позднее в этом руководстве, но уже сейчас можно взглянуть на (вымышленный) пример того, как может выглядеть шаблон приложения, использующего компоненты:
Отношение к пользовательским элементам Web Components
Спецификация Web Components была завершена, но она реализована ещё не во всех браузерах. Safari 10.1+, Chrome 54+ и Firefox 63+ уже поддерживают веб-компоненты. Компоненты Vue, напротив, не требуют никаких полифилов и работают во всех поддерживаемых браузерах (IE9 и выше). При необходимости компоненты Vue могут быть «обёрнуты» в нативные пользовательские элементы.
Компоненты Vue предоставляют возможности, недоступные в простых пользовательских элементах. Самые значимые из них: кросс-компонентная передача данных, коммуникация с использованием пользовательских событий и интеграция с инструментами сборок.
Готовы к большему?
Пока мы лишь кратко представили самые основные возможности ядра Vue.js — остаток этого руководства посвящён более детальному рассмотрению этих и других возможностей, поэтому советуем прочитать его целиком!
Видео Vue Mastery. Посмотрите бесплатный курс Vue Mastery Введение в курс Vue.
Vue.js для начинающих, урок 1: экземпляр Vue
Сегодня мы предлагаем вашему вниманию перевод первого урока учебного курса по Vue.js для начинающих. Его порекомендовала Наталья Теплухина, Staff Engineer в Gitlab и Core Team Member фреймворка Vue (Q/A сессия с Наташей прошла в нашем инстаграм, а расшифровку можно прочитать здесь)
Оригинал курса на английском вышел на сайте vuemastery.com, мы подготовили для вас перевод на русский. Освоив первый урок, вы узнаете о том, что такое экземпляр Vue, и о том, как приступить к разработке собственных Vue-приложений.
Предварительные требования
Предполагается, что тот, кто решит освоить этот курс, обладает знаниями в области базовых веб-технологий: HTML, CSS и JavaScript.
В этом курсе мы займёмся разработкой страницы, представляющей собой карточку товара.
Страница, разработкой которой мы будем заниматься
Цель урока
В этом уроке мы разберёмся с тем, как использовать Vue для вывода данных на веб-странице.
Начальный вариант кода
Мы начнём работу с очень простого HTML- и JavaScript-кода, расположенного в двух файлах.
В этом курсе в качестве среды, в которой предлагается выполнять домашние задания, используется платформа codepen.io. Соответствующие заготовки оформлены в виде CodePen-проектов. Тем, кто проходит этот курс, рекомендуется самостоятельно запускать весь код, который они здесь встречают.
Начало экспериментов в CodePen
Использовать CodePen для запуска кода примеров необязательно. Вы вполне можете использовать какой-нибудь другой онлайн-сервис, или можете обойтись локальной средой разработки, воссоздав у себя описываемые здесь файлы.
Задача
Решить эту задачу нам поможет фреймворк Vue.js. Вот официальное русскоязычное руководство по нему.
Теперь нужно связать DOM с данными экземпляра Vue. Делается это с использованием особой HTML-конструкции, с помощью синтаксиса Mustache, при применении которого используются двойные фигурные скобки:
Вот как будет выглядеть проект в CodePen в том случае, если всё работает так, как нужно.
Данные перенесены из JavaScript на HTML-страницу
Как видите, нам удалось перенести данные из JavaScript-кода на HTML-страницу. А теперь давайте разберёмся в том, что мы только что сделали.
Экземпляр Vue
Вот схема кода, с помощью которого создают экземпляр Vue:
Экземпляр Vue — это корневая сущность приложения. Его создают, передавая конструктору Vue объект с опциями. Этот объект содержит различные свойства и методы, которые дают экземпляру Vue возможность хранить данные и выполнять какие-то действия.
Подключение экземпляра Vue к элементу веб-страницы
Обратите внимание на следующее свойство объекта с опциями, использованного при создании экземпляра Vue:
С помощью этого свойства мы подключаем экземпляр Vue к элементу нашей страницы. Благодаря этому мы создаём связь между экземпляром Vue и соответствующей частью DOM. Другими словами, мы активируем Vue в элементе
Размещение данных в экземпляре Vue
В экземпляре Vue имеется место для хранения данных. Эти данные описывают с помощью свойства data объекта с опциями:
К данным, хранящимся в экземпляре Vue, можно обратиться из элемента веб-страницы, к которому подключён экземпляр Vue.
Использование JavaScript-выражений в HTML-коде
Если нам нужно, чтобы значение свойства product вывелось бы там, где выводится текст заголовка первого уровня, имя этого свойства можно поместить в двойные фигурные скобки в соответствующем теге:
Фактически, речь идёт о том, что в двойных фигурных скобках находится JavaScript-выражение, результаты вычисления которого фреймворк подставляет в тег
в качестве текста.
Важный термин: выражение
Выражения позволяют использовать значения, хранящиеся в экземпляре Vue, а так же JavaScript-конструкции, применение которых позволяет создавать какие-то новые значения.
Примеры выражений
Как уже было сказано, в двойных фигурных скобках можно использовать различные JavaScript-конструкции. Вот несколько примеров:
Знакомство с реактивностью
Изменение значения свойства product приводит к изменению текста, выводимого на веб-странице
Видите, как легко это делается?
Практикум
, который должен находиться ниже элемента
→ Вот заготовка, которую вы можете использовать для решения этой задачи.
Итоги
Поговорим о том, что мы сегодня изучили:
Vue.js и как его понять
В своей работе, мне относительно недавно пришлось столкнуться с фреймворком Vue.js, т.к. до этого, я занимался в основном backend разработкой, пришлось со многим разбираться и многое было сложновато понять, особенно, когда раньше использовал только jQuery. В рамках данной статьи, я хочу помочь своему читателю разобраться с теми проблемами в понимании, с которыми столкнулся я. Конечно проблемы на этапе изучения чего-то нового у всех возникают разные, но и не мало тех, у кого они будут похожи, именно на это и будет направлена данная статья.
Я не буду проводить сравнение данного фреймворка с другими, думаю, что по этому поводу в интернете информации хватает, попытаемся разобраться именно с Vue.js и с “чем его едят?!”. В данном контексте будут рассматриваться примеры для сборки с помощью webpack или подобным системам. Примеры компонентного взаимодействия будут на примере однофайловых компонентов, поскольку они немного проще в понимании. Однако, принципы взаимодействия однофайловых и многофайловых компонентов ничем особо не отличаются.
Рассматриваемые аспекты
Сразу дам небольшой совет: “Не нужно пытаться провести аналогии написанного с jQuery!”, чем больше будет попыток провести аналогию, тем больше будет путаницы и непонимания.
Области видимости переменных
В официальной документации, конечно есть вся необходимая информация, но с ней сложновато разобраться, пока не попробуешь и не разберешься сам. Я попробую облегчить этот процесс.
В любом компоненте Vue имеется набор данных называемых “props”. Это объект содержащий в себе те данные, которые могут быть определены при вызове компонента или иметь значение по умолчанию.
Пример объявления свойств компонента:
В данном примере, мы указываем, что в нашем компоненте есть некий uuid, который является строкой и по умолчанию он является пустой строкой.
Кроме этого, в компоненте содержится объект data<>, который выполняет взаимодействие нашего компонента, с какими-либо другими, которые мы можем использовать в своем. В Vue является нормальной практикой, когда один компонент, может в себе совмещать несколько других, для их объединения. data, часто объявляется как функция, такую практику вы встретите наиболее часто на форумах и сообществах, обсуждающих реализацию на Vue
Как видите, объект data не задает типы переменных, а сразу присваиваются значения. В своем приложении, мы можем менять это значение по определенным событиям, а в свою очередь другие компоненты вызванные в нашем, будут отслеживать изменение этих переменных и определенным образом реагировать на них. Это и будет реактивная связка компонентов с определенными переменными.
Кроме этого, в общем объекте компонента задаются методы (функции), для работы с этими переменными и событиями внутри компонента. В зависимости от того, где они вызываются, они должны располагаться в определенных объектах. Более подробно, про них, вы можете ознакомиться в официальной документации, там вопросов вроде бы не возникает. Мы же говорим об области видимости. Поэтому рассмотрим пример:
В данном примере, мы в своем компоненте создаем шаблон, в котором вызываем компонент Vuetify dialog
Для работы с ним, на понадобится модель alert, которая будет указывать на то открыто ли это окно сейчас или закрыто (соответственно true или false), а так же переменная alertMessage — которая будет в себе нести сообщение об ошибке или предупреждении. Каждому свойству, например color или max-width мы можем задать переменные, которые должны находиться в объекте data()<>, и с помощью своих методов изменять их. Но для простоты ограничимся двумя. Итак для управления этими свойствами, мы должны правильно распределить объекты внутри скрипта компонента.
На данном примере видно, что у нас есть некий метод deleteObject(), заданный в объекте methods, который делает запрос на удаление чего-то на сайте example.com, каким то образом обрабатывает ответ, а в случае провала выбрасывает исключение, в котором, уже мы вызываем наш компонент диалог, присваивая переменной alert значение true и присваиваем сообщение, которое будет выведено в шаблоне. Теперь обратите внимание, что в шаблоне, мы обращаемся к переменным в дате напрямую, просто указывая их название, а в методах, через объект this. Все методы, где бы они не были заданы, если они работают с data, они используют эти переменные через this. Если один метод, должен вызывать какой-то другой, определенный в объекте methods, он тоже вызывается через this.methodName().
Также обратите внимание на обработчик события клика в шаблоне:
Здесь можно без метода изменить значение переменной alert в data, и поскольку она реактивно связана с моделью — компонент сразу отреагирует на ее изменение.
В данном случае, тем кто привык работать с классическими объектами можно запутаться, потому что связь выглядит немного нелогичной. Но на самом деле, никакой магии здесь нет. Когда мы вызываем экземпляр класса Vue и подключаем туда компоненты, он их интерпретирует через собственные объекты внутри js-фреймворка, именно поэтому у него образуется некое подобие собственной области видимости.
Передача данных между компонентами
Часто из нашего компонента, мы должны управлять состоянием других компонентов, вызванных внутри нашего. Как я уже писал выше, для этого существует объект `props`, а передача осуществляется путем присвоения этого значения, либо с помощью нашей переменной в data либо сразу присвоением значения этому свойству.
В нашем же примере, который я использовал выше уже это есть, для удобства, я продублирую его снова, и постараюсь объяснить:
Возьмем для примера, встроенный в наш шаблон компонент
В объекте data, мы должны объявить эту переменную, тогда мы сможем ее изменять методами нашего компонента, указанными в объекте methods:
Теперь мы можем объявить метод, и изменять переменную toolbarColor внутри него, используя конструкцию this.toolbarColor = “Значение”, и компонент будет на нее реагировать.
Таким образом, мы можем передавать значения в дочерние компоненты.
Для обратной связи, т.е. из дочернего компонента получить данные в родительский используются другие, чуть более сложные конструкции. В Vue есть встроенные методы, для этого, они хорошо описаны в официальной документации Vue, по ссылке,
поэтому я не буду подробно останавливаться на них. Проблема в том, что это не всегда удобный способ, и когда вы его подробно изучите, то сами убедитесь в этом. Он, так сказать, применим не во всех случаях.
Есть еще один хороший способ, использование библиотеки Vuex, которая создает некое хранилище для общих переменных, для управления состоянием приложения. На ней я тоже не буду подробно останавливаться, потому что, если вы поймете логику взаимодействия переменных внутри методов компонента и других компонентов, разобраться с Vuex, не должно составить труда. Кроме того, у них есть хорошая русскоязычная документация.
Для работы с Vuex, я прошу обратить особое внимание на то, как она правильно устанавливается, и что для доступа к данным, вам как минимум нужно использовать Мутации и Геттеры. Про них советую прочитать наиболее подробно. Я сначала пытался бегло понять суть и приступить к программированию, но столкнулся с множеством непонятных мне, на тот момент, проблем. Поэтому этим разделам уделите особое внимание.
Я обращу ваше внимание на саму систему взаимодействия. Она немного отличается от стандартного взаимодействия внутри Vue. Это как раз то, что я сначала упустил, а потом потратил много времени, чтобы разобраться. Возьму пример из официальной документации:
Здесь, мы объявляем сам store и getters методы для него. Обратите внимание, что метод внутри getters задан не совсем стандартно, но еще более нестандартно его использование в своем компоненте. В нашем компоненте, если мы хотим использовать переменную из store, мы должны вызвать ее с помощью новых переменных, и метод будем вызывать не как метод, а как свойство объекта store
И никаких скобок, поскольку это метод, который вернет готовый объект, он и вызывается как просто свойство объекта getters внутри $store.
С мутациями немножкуо проще, там сразу написано, что нужно использовать comit(‘methodName’, ПЕРЕДАВАЕМЫЕ_В_МЕТОД_ПЕРЕМЕННЫЕ).
Более подробно про мутации здесь.
Заключение
Мы познакомились с областью видимости переменных внутри компонентов, узнали способы обмена данными между компонентами, отсюда уже должно сложиться общее понимание о взаимодействии компонентов друг с другом в Vue.js. От себя скажу, что система достаточно гибкая, и уже существует множество готовых компонентов и библиотек, расширяющих возможность Vue. Каждый желающий может присоединиться к развитию этой системы и облегчать жизнь другим разработчикам. Компонентная система позволяет легче обслуживать код, соединять готовые компоненты внутри других, и не дублировать код, что приближает нас к способом “красивой” разработки. Новичкам желаю терпения и успеха, в познании новых для себя областей.
Ниже я добавил ссылки, с которых я использовал материалы для написания статей и примеров. Для библиотеки Vuetify я напишу две ссылки, на англоязычную и на русскоязычную документацию, поскольку русскоязычная на момент написания статьи переведена не полностью, и в ней может чего-то не быть. Но в англоязычной, вы сможете найти все что нужно знать об этой библиотеке. По работе с данной библиотекой, могу написать более подробно, если будут вопросы по ней или что-то станетне понятно.