Уроки по Vue.js
Разработка сайтов,  Уроки по Vue

Знакомство с Vue.js

В этой серии уроков по Vue.js вы познакомитесь с таким популярным фреймворком как Vue, который является хорошей альтернативой Angular.js и React.js. Также узнаете с чего лучше начать и что понадобиться для изучения данного фреймворка. Начнём?

Vue.js – это фреймворк разработанный бывшим разработчиком Angular.js, в котором учтены все его недостатки и самое главное, что данный фреймворк имеет высокую производительность по сравнению с другими фреймворками и легок в обучении.

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

Поэтому если вы во всех своих проектах в основном используете Jquery, то я вам обещаю, что после того как вы выучите Vue – jquery для вас будет чем-то неудобным и непрактичным, так как реализация некоторых задач в jqeury будет для вас написанием десяток строчек кода, а в Vue в несколько раз меньше. Не верите?

Начало работы с Vue.js

Переходим по ссылке https://vuejs.org/v2/guide/installation.html и выбираем удобный тип инсталяции фреймворка. Их всего 3:

  1. Просто вставляем скрипт с их СDN:
  2. Устанавливаем через терминал:
  3. Или скачиваем файл vue.js и подключаем в футере вашего проекта;

Объекты! Объекты повсюду!

Если вы не знаете что такое объекты в JavaScript и как они выглядят, то тогда лучше подучите основы JS, так как они вам пригодятся.

Для создания любого приложения используется объекты Vue, которые инициализируют приложение. Давайте рассмотрим первый пример и посмотрим из чего он состоит:С начала мы инициализируем Vue.js, после чего указываем какой элемент на сайте будет отвечать за вывод информации. Я выбрал див с айди  “#app”, после чего указал в data какие данные должно хранить приложение и вывел их уже непосредственно в html с помощью специальных скобок. В data может быть сколько угодно свойств, поэтому не ограничивайте себя) Но только не забывайте, что выводить их можно только по их имени.

Как видите, всё достаточно просто!  Далее будет ещё интереснее!

Двухсторонняя привязка данных в Vue

С помощью Vue вы можете реализовать динамическую выдачу данных, например при вводе какой-то информации в поле формы сразу сможете увидеть вывод данной информации в каком-то определенном элементе. Давайте посмотрим на примере что я имею в виду. Попробуйте в поле “Напиши что-то сюда!” написать что либо и посмотрите что произойдет:

Прикольно? Неправда ли? Это называется двухсторонняя привязка данных, которая реализуется с помощью обработчика v-model, в котором указываете имя свойства, в которое должна передаваться информация, после чего можно с ней делать что угодно. А что именно мы уже узнаем в следующей статье 😉

Знакомство с Vue.js
5 (100%) 1 vote