Введение в фреймворк Vue

Vue фрейворк используется для создания SPA (single page application - одностраничное приложение). То есть сайтов, на котором все действия происходят на одной странице без перезагрузки. Примерами таких сайтов могут служить социальные сети, почтовые веб клиенты и другие сайта, на которых вы не замечали перезагрузки страниц.

Подключение Vue на страницу

Для подключения фреймворка Vue есть несколько механизмов. Они описаны на странице официальной документации. Для образовательных целей можно подключить скрипт через CDN:

<script src="https://unpkg.com/vue@next"></script>

Но рекомендуем перенести скрипт себе на сайт и подключать его со своего сайта.

Как работать с Vue

Для работы с Vue первым делом необходимо создать объект этого класса. Назовём его "app":

let app = new Vue;

При создании объекта можно передать его свойства (настройки), которые можно использовать позже. Это делается так:

let app = new Vue({
   'название_настройки' : 'значение',
   'название_настройки_2' : 'значение 2'
});

Самая главная настройка - это настройка под названием "el". В неё записывается селектор (как в CSS) элемента, с которым ведётся работа. Давайте создадим html элемент с селектором:

<div id="application"></div>

И создадим объект, в котором будет настройка "el" со значением "application":

let app = new Vue({
   el: '#application'
});

Теперь можно через Vue изменять элемент. Давайте попробуем это сделать. Попробуем изменить содержание нашего "div" контейнера. Для этого необходимо воспользоваться настройкой "data", у которой есть ключ "message", куда можно указать html содержание.

let app = new Vue({
   el: '#application',
   data: {
      message: 'Тише мыши, кот на крыше',
   },
});

При этом нам необходимо изменить сам контейнер, чтобы вывести в него "message". Поэтому ставим внутрь него вывод с помощью конструкции "{{ message }}":

<div id="application">
   {{ message }}
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         message: 'Тише мыши, кот на крыше',
      },
   });
</script>

- если загрузить страницу с таким кодом, то можно будет увидеть, что контейнер принял вид:

<div id="application">
   Тише мыши, кот на крыше
</div>

Ключ с названием "message" мы придумали самостоятельно. Можно сделать ключ "message1" и "message2". Или с любыми другими названиями:

<div id="application">
   {{ message1 }}
   {{ message2 }}
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         message1: 'Тише мыши, кот на крыше,',
         message2: 'а котята ещё выше.'
      },
   });
</script>

При выполнении такого кода мы увидим сообщение

<div id="application">
   Тише мыши, кот на крыше,
   а котята ещё выше.
</div>

Арифметические операции с Vue

Фреймворк Vue умеет не только выводить значения настроек. Но и способен на математические операции. Приведём пример сложения двух чисел, которые находятся внутри "data" настройки:

<div id="application">
   {{ var1 + var2 }}
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         var1: 3,
         var2: 5
      },
   });
</script>

В результате выполнения этих операций можно будет увидеть:

<div id="application">
   8
</div>

Массивы и объекты в Vue

В настройках можно хранить не только числа и строки, но и массивы с объектами. Продемонстрируем это с их выводом

<div id="application">
   {{ arr[1] }} // вывод элемента массива
   {{ obj['a'] }} // вывод элемента объекта
   {{ obj.с }} // вывод элемента объекта
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         arr: [1, 2, 3], // массив
         obj: {a: 1, b: 2, c:3} // // объект
      },
   });
</script>

Такой код выведет:

<div id="application">
   2
   1
   3
</div>