Vue.JS - вводный урок

Перед вами первый урок из мини-курса по Vue.JS. Он появился, потому что большой курс не вмещает 8 уроков. Теперь вводная часть лежит в свободном доступе в виде 5 видеороликов на Youtube-канале. Так вы сможете понять, нравится ли вам этот фреймворк, и хотите ли изучать его дальше.

Сегодня мы рассмотрим, что такое Vue.JS, его подключение, работу с объектом data и основы реактивности данных.

Что такое VueJS

Когда сложность приложения перерастает уровень jQuery и нужно создать что-то по-настоящему крутое, есть три мощных фреймворка – Vue.js, Angular и React. Angular с React на слуху, потому что React сделан фейсбуком, Angular — гуглом. А Vue.js сделан обычным человеком.

Все эти Фреймворки ориентированы на компонентный подход и самое главное, что нужно уметь с ними делать - организовывать взаимодействие между компонентами в рамках большого приложения. Я выбрал Vue, потому что он не уступает по функционалу своим конкурентам, а новичок может одной строчкой подключить его на страницу и использовать. Разумеется, и Vue, и Angular, и React при профессиональном серьезном использовании нуждаются в системах сборки. Например если мы делаем большое SPA (Single Page Application).

Во Vue есть полная реактивность данных, которой нет в React и это упрощает первый опыт с данным Фреймворком и мы её увидим совсем скоро, когда напишем первый кусочек кода. Vue не требует знания каких-то дополнительных технологий и языков. Angular требует typescript, в React шаблоны пишутся на jsx, а Vue использует обычные JavaScript, HTML и CSS даже в рамках серьезной разработки. Vue появился после Angular и React и на мой взгляд, взял лучшее, что есть и в том и в другом Фреймворке. На момент записи данного видео Vue еще уступает React и Angular по количеству заказов, но его доля стабильно растет.

Vue в действии

Давайте посмотрим на Vue.js в действии. Чтобы его подключить, зайдите на официальный сайт vuejs.org и возьмите с cdn. Я просто скопировал этот файл и положил в папку js.

И вот наша первая страничка, на которой мы попробуем что-нибудь сделать с помощью Vue.js.

Первое действие, которые мы обязаны сделать - подключить Vue. Разумеется, те из вас, кто поопытнее, сейчас подумали – кто так Vue подключает, надо взять Nod.js, запустить npm, систему сборки типа gulp или webpack. Но главная задача сейчас - легко запустить Vue и начать с ним работать. К пятому уроку мы придем к системам сборки.

Как только мы подключили Vue, можно создать экземпляр данного класса. Например, «let sample» присвоить «new Vue». Такой экземпляр класса Vue особого смысла не несет, и чтобы понять, как это работает, мы должны передать в качестве параметра объект, в котором будут содержаться определенные ключи. Первый важнейший ключ - el. Этот ключ определяет, какой элемент будет контролировать экземпляр Vue. В ключ “el” мы передаем любые данные: селектор, селектор класса, id селектор, селектор тега, что угодно, и по данному селектору получаем элемент, которым будем управлять. Важный нюанс - здесь берется ровно один элемент. Т.е если бы было два тега div с классом sample под контроль был бы взят первый. Теперь этот экземпляр Vue полностью контролирует внутреннее содержимое тега div.

При такой форме записи внутренности этого элемента будут неким шаблоном, в который мы можем поставлять различные директивы, переменные и так далее. Но вот даже если их нет, как мы видим, ничего плохого не происходит. И Input, и hr, и h2 остались внутри тега div с классом sample.

Разумеется, сейчас Vue ничего не делает, и чтобы внести в наше приложение хоть какой-то смысл, нужно создать первый объект - data. Данный объект описывает данные, которые лежат в экземпляре Vue и которые используются внутри элемента, т.е который мы можем там выводить. Введем поле, которое будет называться name, и выведем его внутрь div. Делается это с помощью двух фигурных скобок - {{...}}, а между ними описывается название ключа, который появится в шаблоне. Этот ключ не обязательно хранится в объекте data, этот ключ может лежать и в computed, и в methods и так далее. Но пока мы видим четкую закономерность - конкретный name будет взят из объекта data.

<div class="sample">
    <input type="text" v-model="name">
    <hr>
    <h2>Hello, {{ name }}</h2>
</div>

Если обновить страничку, мы увидим, что после Hello раньше стояло имя, а теперь стоит строка.

Если вписать в поле name какое-либо значение, то оно появится на экране.

Пример, который я вам показываю, избит донельзя, но никто ничего лучшего не придумал, чтобы показать, что такое реактивность данных. Классика демонстрации, что такое реактивность данных, заключается в добавлении маленькой директивы, директивы v-model в которую мы вписываем как в атрибут, т.е v-model как будто название атрибута, а значение name, после этого начинается действительно магия, которая порой вызывает вопросы и непонимание. Я вписываю в input какое-то имя и сразу вижу его в заголовке. Т.е получается, что мы как будто бы магическим образом связали input и заголовок h2 с помощью поля data name. Еще раз повторю — это самый избитый пример, но ничто не подчеркивает лучше идею реактивности данных.

Давайте про нее поговорим чуть подробнее, что за реактивность данных. Открываем в браузере отладчик и выводим на экран переменную sample. Я специально создавал переменную глобальной, чтобы легко с ней работать через консоль. В ней лежит экземпляр Vue, и я сейчас могу к этому экземпляру Vue обратиться по интересующему меня ключу. Пишем: sample. , после чего выпадают разные значения, в том числе name, и в нем меняем значение.

Обратите внимание, мы сделали действие в консоли, а данные изменились на страничке.

Все это делается за счет так называемых геттеров и сетторов, которые есть в новом JavaScript и все нормальные браузеры их понимают. То есть поставлена “прослушка”, которая замечает, что мы пытаемся установить новое значение в поле нашего объекта и при изменении заново генерирует те части шаблона, которые нуждаются в обновлении реактивности.

На идею реактивности данных сейчас подсели все современные Фреймворки. Но важно понимать, что сама реактивность достигается с помощью геттеров и сеттеров, а директива v-model - не магия, это обычный JavaScript и при должном понимании JavaScript вы сейчас легко поймете как этот v-model работает.

Если бы я вписал значение атрибута value= «name», то name было бы воспринято просто как слово, и поэтому, чтобы Vue.js понимал, что в value надо поставить динамическое значение, существует директива: v-bind:value=”name”. Если бы у меня изначально в name лежало бы какое-то значение, оно было бы успешно подставлено в строку при выводе на экран.

Подробнее про директивы расскажу на следующем уроке, потому что здесь есть нюансы, которые обязательно надо знать. Но вы же понимаете, что на чистом JavaScript нет никакой проблемы так сделать. Т.е. представьте, что у вас есть какой-то узел dom, вы получили с помощью селектора Input, переопределили у него атрибут value и записали 123, т.е. никакой магии не происходит.

Точно так же никакой магии не происходит и для создания динамики, реактивности, что вы здесь что-то вписываете, а в объекте визуально что-то меняется. Для этого существует другая директива, которая называет v-on. Вот эта самая директива - это подписка на события, пишусь на события Input и в рамках этого события напишем так:

Смотрим на результат: без v-model происходит всё то же самое, что и с ним. Но зато так гораздо проще понять, как это связано с обычным JavaScript. Считаем что node - это Input, узел, и получается, что мы как будто сделали addEventListener, подписались на событие Input, а то вы видите в $event, это Vue так называет переменную (е) - стандартную переменную события и теперь никто не мешает нам получить из event, я просто показываю, что переменную мы может называть как угодно, т.е я точно так же могу назвать ее $event, мы так считываем значения, почему не через this, потому что это может быть стрелочной функцией или функцией с привязанным контекстом с помощью bind и мы после этого меняем innerHTML нашего заголовка, который хранится в h2. На самом деле там все сложнее, это виртуальный dom, но суть именно такая - никакой магии здесь нет, просто-напросто меняется значение объекта за счет подписки на события, при этом при изменении свойств объекта есть сеттер, то есть элемент, прослушивающий момент изменения, и когда изменение физически происходит, то запускается метод который ререндерит dom по шаблону, изменяя только те узлы, которые реально изменились.

Вот она - главная идея Vue.js, смысл реактивности данных.

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

Лучше не просто посмотреть видео, а повторить написание кода собственноручно. Разумеется, необязательно прописывать v-bind и v-on, вам достаточно ограничиться v-model, но рекомендую попробовать на своем опыте, как же просто начать работать с Vue.js.

До встречи на следующем уроке. Уверен этот Фреймворк вам понравится.